import React from "react";
import "./App.css"
import Navbar from "./components/Navbar/Navbar";
import Home from "./components/Home/Home"
import About from "./components/About/About";
import { BrowserRouter,Route,Routes,Router } from "react-router-dom";

export default function App()

{
  return(
    <div>
    <Navbar />
 
    <BrowserRouter>
           <Routes>
              <Route path="/" element={<Home />} />
              <Route path='about' element={<About/>} />
            
             
           </Routes>
  
           </BrowserRouter>
    </div>
    
  
   
  )
  

}

this is my app component

import React from "react";
import  {Link}  from "react-router-dom";
export default function Navbar()
{
    return(
      <nav>
        <Link to='/'> Home</Link>
        <Link to='/about'>About</Link>
      </nav>

)

}

this is my nav component The issue whenever i try to load from the URL without adding a navbar my component works perfectly fine but after i add navbar it doesn't works

CodePudding user response：

Move navbar inside BrowserRouter

<BrowserRouter>
     <Navbar />
       <Routes>
          <Route path="/" element={<Home />} />
          <Route path='about' element={<About/>} />
        
         
       </Routes>

       </BrowserRouter>
</div>

CodePudding user response：

Try this

App.js

import { RouterProvider } from "react-router-dom";
import routes from "./routes/routes";


function App() {
    return (
        <div><RouterProvider router={routes} />
        </div>
    );
}

export default App;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

router.js

import { createBrowserRouter } from "react-router-dom";
import Main from "../layout/Main";
import Home from "./components/Home/Home"
import About from "./components/About/About";

const routes = createBrowserRouter([
    {
        path: "/",
        element: <Main />,
        children: [
            {
                path: "/",
                element: <Home />,
            },
            {
                path: "about",
                element: <About />,
            }
        ],
    },
]);

export default routes;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Main.js

import React from "react";
import { Outlet } from "react-router-dom";
import Navbar from "./components/Navbar/Navbar";

const Main = () => {
  return (
    <div>
      <Navbar />
      <Outlet />
    </div>
  );
};

export default Main;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Navbar.js

import React from "react";
import { Link } from "react-router-dom";


const Navbar = () => {
    return (
        <nav>
            <ul>
                <h1>Logo</h1>
                <li>
                    <Link to="/">Home</Link>
                </li>
                <li>
                    <Link to="/about">About</Link>
                </li>
            </ul>
        </nav>
    );
};

export default Navbar;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

this is the best practice for the latest react-router-dom just start with the App.js

copy and paste it click on the import lines which will prompt the creation of required files I have coded everything according to your components folder you will have to create two or three new files just copy and paste the code and add css where needed everything will work