React Router is giving me a blank page-CodePudding

I am using the react router to create multiple webpages without changing my navbar and all it gives me is a blank page. I have tried multiple things such as a browser router, and switch and neither of them work.


function App() {
  
  return (
    <div className="App">
      <Navbar />
      
      
      <Router>
      
        <Link to="/">Home</Link>
        <Link to="/aggrid">Aggrid</Link>
        <Route path="/" component={GhibliModal} />
        <Route path="/aggrid" component={Aggrid} />
      
      </Router>

      
    </div>
  );
}```

CodePudding user response：

Well first things first, you need to wrap your whole App component with <BrowserRouter>, but I from what you said in the question, I would assume you already know that.

Secondly, you don't need the <Router> component. Read here.

From reading the documentation, all <Route> components must be wrapped in a <Routes> (note the 's' at the end) component.

And lastly, I'm pretty sure you cannot have <Link> components inside the <Routes> component.

Also, the component prop is now called element, so

<Route path="/" component={GhibliModal} />

should become

<Route path="/" element={<GhibliModal/>} />

CodePudding user response：

You need to add <Outlet /> tag in the components that are loaded by Router. I usually put it at the end of the JSX:

return (
    <div>
        <yourcodehere/>
        <Outlet/>
    </div>
)