React-router-dom 导航不工作

Question

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

我得到了这个代码。我收到一条警告，代码似乎不起作用。

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.

当在 localhost:3000/ 上访问页面时，代码应该导航到 localhost:3000/dashboard 但由于某些原因它没有这样做。

有什么帮助吗？谢谢

Answer 1

您仍然在 element 属性上渲染 Navigate 组件。 react-router-dom@6 Route 组件只有 element 属性用于渲染路由组件。也不再有 exact 道具，因为在 v6 中所有路由现在 always 完全匹配。

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

完整代码

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

React-router-dom 导航不工作

React-router-dom Navigation to not working

reactjs

react-router

react-router-dom