Reactjs React Router Dom V6 嵌套路由属性

发布于05月27日

在React路由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>
  );
};

...现在，当我try 移动到V6版本时，我无法访问嵌套页面的内容.这两个嵌套的路由显示基于"type"属性的内容，但在v6中我根本没有得到任何内容.我看到的只是主页.当我试图在导航栏中导航时，只有链接在更改，但我无法访问type元素的内容.

我当前的v6代码:

应用程序.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>
  );
};

成年男子jsx公司:

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

请有人帮助我了解我做错了什么，以及为什么react router不加载组件的内容？

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

Reactjs React Router Dom V6 嵌套路由属性

推荐答案

Reactjs相关问答推荐

webpack 5中动态导入的路径

以下代码是否存在安全问题？

如何处理具有REACTION-REDUX状态的Nextjs路由警卫

Reaction Ploly：如何在多个子情节中共享zoom 状态

我如何在不被 destruct 的情况下将导航栏固定在顶部？

ReactJS：唯一项目的数量总和

使用 MUI 菜单时添加新 html 元素时布局意外滚动跳转

验证 Yup 中的对象项

为 Next.js 应用程序目录中的所有页面添加逻辑的全局文件是什么？

如何将 npm 包添加到我的 Vite + React 应用程序中？

React-dom 的钩子调用无效.我能做些什么？

React Wordpress Apache 在索引之外重新加载 -> 未找到页面

计数器递增 2 而不是 1

Formik onChange() 字段挂钩覆盖显示值和 Select 机制

如何处理页面加载时发生的 reactjs 错误？

如何在 React 中使用 debounce hooks

更新和删除功能不工作 Asp.net MVC React

从一个获取 axios 请求(ReactJS)中删除默认参数

在嵌套的 Stack Navigator 中的 BottomTabBar 中导航会导致比以前更多的渲染

你如何使用 refs 访问 React 中映射子项的值？