React Router pathes

user_17661123 0
Viewed 86

App component contains Navbar. Page component contains main. Idea - to show App component and page components together when the url is 'localhost:3000/authentication' But when I am on this url - it shows navbar only.

ReactDOM.render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />}>
        <Route path="authentication" element={<Authentication />} />
      </Route>
    </Routes>
  </BrowserRouter>,

  document.getElementById("root")

);

But when I do it without nesting it shows me App on '/' url and Auth on 'auth' url:

ReactDOM.render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />}/ >
      <Route path="authentication" element={<Authentication />} />
    </Routes>
  </BrowserRouter>,

  document.getElementById("root")

First example should work, but he doesn't. Using useNavigate

react-router-dom react-router reactjs
1 Answers

The App component should also render an Outlet component for the nested Route components to be rendered into.

Outlet

An <Outlet> should be used in parent route elements to render their child route elements. This allows nested UI to show up when child routes are rendered. If the parent route matched exactly, it will render a child index route or nothing if there is no index route.

Example:

import { Outlet } from 'react-router-dom';

const App = () => (
  <>
    <Navbar />
    <Outlet /> // <-- nested routes render here
  </>
);

...

ReactDOM.render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />}>
        <Route path="authentication" element={<Authentication />} />
      </Route>
    </Routes>
  </BrowserRouter>,
  document.getElementById("root")
);
user_86908570
Related