src/components/Caminhos/Caminhos.tsx

@@ -0,0 +1,31 @@
+import homeImg from "./assets/image/home.png";
+import styles from "./caminhos.module.scss";
+import { Link, Outlet } from "react-router-dom";
+import { Home } from "../../pages/Home";
+import React, { useState } from "react";
+
+const Caminhos = (prop: { titulo: string }) => {
+  return (
+    <>
+      <nav>
+        <ul>
+          <li>
+            <Link to="/">
+              <img src={homeImg} alt="Home image" />
+            </Link>
+          </li>
+          <li>
+            <p>&gt;</p>
+            <p>{prop.titulo}</p>
+          </li>
+          <li>
+            <Link to="/contact">Contact</Link>
+          </li>
+        </ul>
+      </nav>
+
+      <Outlet />
+    </>
+  );
+};
+export { Caminhos };

src/components/NavigationBar/NavigationBar.tsx

@@ -2,7 +2,9 @@ import { M3Logo } from "../M3Logo/M3Logo";
 import styles from "./navigationBar.module.scss";
 import m3LogoImg from "./assets/image/Logo-M3Academy.svg";
 import { Cart } from "../Cart/Cart";
+import React, { useState } from "react";
 const NavigationBar = () => {
+  const [linkUrl, setLinkUrl] = useState(0);
   return (
     <nav className="navbar navbar-expand-xpp bg-body-tertiary " id="navegador">
       <div className="container-fluid">

src/components/Router/Router.tsx

@@ -1,6 +1,7 @@
 import React from "react";
-import { Route, BrowserRouter } from "react-router-dom";
+import { Routes, Route, BrowserRouter } from "react-router-dom";
 import { Home } from "../../pages/Home";
+import { Teste } from "../../pages/Teste";
 /*
 import Home from "./Home";
 import Sobre from "./Sobre";
@@ -9,12 +10,17 @@ import Usuario from "./Usuario";
       <Route component={Sobre} path="/sobre" />
       <Route component={Usuario} path="/usuario" />
 */
-const Routes = () => {
+
+const RoutesUrl = () => {
   return (
     <BrowserRouter>
-      <Route path="/" element={<Home />} />
+      <Routes>
+        <Route path="/" element={<Teste titulo={"home"} />}>
+          <Route index element={<Teste titulo={"home"} />} />
+        </Route>
+      </Routes>
     </BrowserRouter>
   );
 };
 
-export { Routes };
+export { RoutesUrl };

src/index.tsx

@@ -3,13 +3,17 @@ import ReactDOM from "react-dom/client";
 import "./styles/main.scss";
 
 import { Home } from "./pages/Home";
+import { Teste } from "./pages/Teste";
 
+import { BrowserRouter } from "react-router-dom";
 const root = ReactDOM.createRoot(
   document.getElementById("root") as HTMLElement
 );
 root.render(
   <React.StrictMode>
-    <Home />
+    <BrowserRouter>
+      <Teste titulo={"home"}></Teste>
+    </BrowserRouter>
   </React.StrictMode>
 );
 

src/pages/Teste.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { Header } from "../sectors/Header/Header";
+import { Caminhos } from "../components/Caminhos/Caminhos";
+
+const Teste = (prop: { titulo: string }) => {
+  return (
+    <div>
+      <Caminhos titulo={prop.titulo}></Caminhos>
+    </div>
+  );
+};
+
+export { Teste };

src/styles/partials/navigation.scss

@@ -35,13 +35,21 @@
   background-color: white;
 }
 .navbar-collapse {
-  background-color: white;
+  @media screen and (max-width: 1025px) {
+    background-color: white;
+  }
   .nav-link {
-    color: black;
+    color: white;
+    @media screen and (max-width: 1025px) {
+      color: black;
+    }
   }
 }
 @media screen and (max-width: 1025px) {
   .container-fluid {
     padding: 0 0 0 0;
   }
+  .navbar-nav {
+    margin-left: 20px;
+  }
 }