React-router-dom Navigation to not working

April 22, 2022

  render() {
    return (
      <BrowserRouter>
        <Routes>
          <Route exact path="/" render={() => <Navigate to="/dashboard" />} />
          <Route exact path="/dashboard" element={<Dashboard />} />
        </Routes>
      </BrowserRouter>
    );
  }
}

I got this code. I get an warning and the code does not seem to work.

router.ts:11 Matched leaf route at location "/" does not have an element. This means it will render an <Outlet /> with a null value by default resulting in an "empty" page.

When the page is accesed on localhost:3000/ the code is supposed to navigate to localhost:3000/dashboard but it’s not doing that for some reason.

Any help? Thanks

>Solution :

You still render the Navigate component on the element prop. react-router-dom@6 Route components have only the element prop for rendering routed components. There is also no longer an exact prop as in v6 all routes are now always exactly matched.

<Route path="/" element={<Navigate to="/dashboard" />} />

Full Code

render() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Navigate to="/dashboard" />} />
        <Route path="/dashboard" element={<Dashboard />} />
      </Routes>
    </BrowserRouter>
  );
}