React Router Dom V6 嵌套路由属性

Question

在 React Router Dom v5 上，我有一个可以使用嵌套元素的工作代码。 V5 代码为：

const App = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/" />
        {user && (
          <>
            <Route path="/movies">
              <Home type="movie" />
            </Route>
            <Route path="/series">
              <Home type="series" />
            </Route>
          </>
        )}
      </Switch>
    </Router>
  );
};

... 现在，当我尝试迁移到 V6 版本时，我无法访问嵌套页面的内容。这两个嵌套路由显示基于“类型”属性的内容，但在 v6 中我根本没有得到任何内容。我看到的只是主页。当我尝试在导航栏中导航时，只有 link 发生变化，但我无法访问类型元素的内容。

我当前的 v6 代码：

App.jsx:

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} >
          <Route path="/movies" element={<Home type='movies'/>} />
          <Route path="/series" element={<Home type='series'/>} />
        </Route>
      </Routes>
    </Router>
  );
};

Home.jsx:

const Home = ({type}) => {
      return (
        <div className='home'>
            <Navbar />
            <Featured type={type} />
            <List />
            <List />
            <List />
            <List />
            <Outlet />
        </div>
      )
    }

谁能帮我理解我做错了什么以及为什么反应路由器不加载组件的内容？

Answer 1

我建议不要在索引路由中嵌套路由 ( when path = "/" )。如果你要嵌套一条路线，应该是像 /profile/settings 这样的路径，/settings 嵌套在 /profile.

中

这是我将代码更改为：

const App = () => {
  return (
    <Router>
      <Routes>
        <Route index element={<Home />} />
        <Route path="/movies" element={<Home type='movies'/>} />
        <Route path="/series" element={<Home type='series'/>} />
      </Routes>
    </Router>
  );
};

More on Nested Routes

Answer 2

据我所知，RRDv6 代码不是准确的转换。 v6 版本递归渲染 Home 组件。嵌套路由也不应该使用绝对路径。

建议

从 Home 中删除 Home 组件和 Outlet 并只渲染两个嵌套路由。如果目的是渲染一个没有任何类型的 Home 组件，那么使用索引路由。

const Home = ({ type }) => {
  return (
    <div className='home'>
      <Navbar />
      <Featured type={type} />
      <List />
      <List />
      <List />
      <List />
    </div>
  );
};

...

<Route path="/">
  <Route index element={<Home />} />
  <Route path="movies" element={<Home type='movies' />} />
  <Route path="series" element={<Home type='series' />} />
</Route>

将所有路由展平，去掉Home中的Outlet，和上面基本一样，只是现在用的是绝对路径

const Home = ({ type }) => {
  return (
    <div className='home'>
      <Navbar />
      <Featured type={type} />
      <List />
      <List />
      <List />
      <List />
    </div>
  );
};

...

<Route path="/" element={<Home />} />
<Route path="/movies" element={<Home type='movies' />} />
<Route path="/series" element={<Home type='series' />} />

定义一条路线并利用 path 发挥您的优势。换句话说，声明一个路径，其中 type 是路由路径参数，并检查 Home 组件中参数的 type。

const Home = () => {
  const { type } = useParams();
  return (
    <div className='home'>
      <Navbar />
      <Featured type={type} />
      <List />
      <List />
      <List />
      <List />
    </div>
  );
};

...

<Route path="/" element={<Home />} />
<Route path="/:type" element={<Home />} />

React Router Dom V6 嵌套路由属性

React Router Dom V6 Nested Route Attributes

reactjs

react-router-dom