feature: new 404 page created in react, you can change the default ro…ute in router.js to use in your project, need adjust to work 100%

src/pages/NotFoundPage/index.jsx

@@ -0,0 +1,22 @@
+import React from "react";
+import "./style.css";
+import nameLogo from "../../assets/queplanta-text-dark.svg";
+import leafLogo from "../../assets/logo-queplanta.png";
+
+export function NotFoundPage() {
+  return (
+    <div className="container">
+      <div className="logoContainer">
+        <img src={leafLogo} alt="" width={"80px"} />
+        <img src={nameLogo} alt="" />
+      </div>
+      <div className="messageContainer">
+        <h1>404</h1>
+        <p>Pagina não encontrada</p>
+      </div>
+      <div className="buttonContainer">
+        <button>Voltar para a página inicial</button>
+      </div>
+    </div>
+  );
+}

src/pages/NotFoundPage/style.css

@@ -0,0 +1,39 @@
+.container {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.logoContainer {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+}
+
+.messageContainer {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: row;
+  gap: 10px;
+}
+
+.buttonContainer button {
+  height: 40px;
+  cursor: pointer;
+  border: none;
+  background-color: #009348;
+  color: #fff;
+  border-radius: 5px;
+
+  font-weight: bold;
+}
+.buttonContainer button:hover {
+  opacity: 0.8;
+}

src/router.js

@@ -16,6 +16,7 @@ import { revisionsRoutes } from "./revisions/routes.js";
 
 import OccurrencePlate from "./occurrences/OccurrencePlate.js";
 import OccurrencePlateQuery from "./occurrences/OccurrencePlate.query.js";
+import { NotFoundPage } from "./pages/NotFoundPage/index.jsx";
 
 export const historyMiddlewares = [queryMiddleware];
 
@@ -46,6 +47,7 @@ export const routeConfig = makeRouteConfig(
       {/*needs to be last one*/}
       {pagesRoutes}
     </Route>
+    <Route path="*" Component={NotFoundPage} />
   </React.Fragment>
 );