React router v6 outlet doesn't seem to work

user_2508297 0
Viewed 7156
ReactDOM.render(
  <BrowserRouter>
    <nav>
      <Link to="/">Home</Link>
      <Link to="/child">Child</Link>
    </nav>
    <Routes>
      <Route path="/" element={<ParentComponent />} />
      <Route path="child" element={<ChildComponent />} />
    </Routes>
  </BrowserRouter>,
  document.getElementById("root")
);

function ParentComponent() {
  return (
    <div>
      <h1>i am parent component</h1>
      <Outlet />
    </div>
  );
}
function ChildComponent() {
  return (
    <div>
      <h1>i am child component</h1>
    </div>
  );
}

When I am visiting /child route I am expecting this output:
I am parent component
I am child component

instead of above I am just getting:
I am child component

react-router-dom react-router reactjs
2 Answers

Below code worked.Now if i access Home(/) route i get output as "i am parent component" and when i access Child(/child) route i get "i am parent component i am child component". This is what i was expecting.

Earlier i was not nesting routes.Corrected my question accordingly.

ReactDOM.render(
  <BrowserRouter>
    <nav>
        <Link to="/">Home</Link>
        <Link to="/child">Child</Link>
      </nav> 
    <Routes>
      <Route path="/" element={<ParentComponent />}>
        <Route path="child" element={<ChildComponent />} />
      </Route>
    </Routes>
  </BrowserRouter>,
  document.getElementById("root")
);

function ParentComponent() {
  return <div>
  <h1>i am parent component</h1>
  <Outlet/>         
  </div>;
}
function ChildComponent() {
  return <div>
  <h1>i am child component</h1>
  </div>;
}
user_25082970

You probably never need to render a <Router> manually. Instead, you should use one of the higher-level routers depending on your environment. You only ever need one router in a given app.

You should use <BrowserRouter>.

<BrowserRouter> is the recommended interface for running React Router in a web browser.

So your code will be like this:

ReactDOM.render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<ParentComponent />}>
        <Route path="child" element={<ChildComponent />} />
      </Route>
    </Routes>
  </BrowserRouter>,
  document.getElementById("root")
);

<Router> is the low-level interface that is shared by all router components (<BrowserRouter>, <HashRouter>, <StaticRouter>, <NativeRouter>, <MemoryRouter>). In terms of React, is a context provider that supplies routing information to the rest of the app.

user_132490820
Related