How to add fixed navbar in react-router-dom v6.4.5

December 14, 2022

As, I’m migrating my routes from old version to v6.4.5.But is not showing me Home & Auth component. Is there any way to fix it so that i can make it working.

import { Container } from "@mui/material";
import Navbar from "./components/Navbar/Navbar";
import Home from "./components/Home/Home";
import Auth from "./components/Auth/Auth";
import { createBrowserRouter, Route, Link } from "react-router-dom";

export const App = () => {
  return (
    <Container maxWidth="lg">
      <Navbar />
    </Container>
  );
};

const router = createBrowserRouter([
  {
  
    element: <App />,
    children: [
      {
        path: "/home",
        element: <Home />,
      },
      {
        path: "/auth",
        element: <Auth />,
      },
    ],
  },
]);

export default router;

>Solution :

Assuming <App> as the path "/" by default (it’s not specified in the doc), you need to remove it from your children routes:

const router = createBrowserRouter([
  {
    path: "/"
    element: <App />,
    children: [
      {
        path: "home",
        element: <Home />,
      },
      {
        path: "auth",
        element: <Auth />,
      },
    ],
  },
]);