CODEWITHSUNDEEP
reactjsreact-routerreact-router-dom
Danny McCormick
Danny McCormick

Reputation: 56

React Router pathes

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

Upvotes: 1

Views: 96

Answers (1)

Drew Reese
Drew Reese

Reputation: 203466

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")
);

Upvotes: 1

Related Questions