如何在React JS功能组件中实现儿童/嵌套路由

发布于 2025-02-11 19:15:00 字数 510 浏览 0 评论 0原文

我有以下路由配置

<Routes>
  {
    navbarRoutes.map((route) => (
      <Route key={route.path} path={route.path} element={route.main}>
    ))
  }
</Routes>

和路由常数文件的app.js如下：

const navbarRoutes = [
  {
    path: '/',
    text: ''user,
    exact: true,
    main: <User>
  },
  {
    path: '/useraddress',
    text: ''useraddress,
    exact: true,
    main: <useraddress>
  }
]

如何在“/userAddress”内部以及app.js内部实现嵌套路由或子路由？

原文

I have App.js with following route configuration

<Routes>
  {
    navbarRoutes.map((route) => (
      <Route key={route.path} path={route.path} element={route.main}>
    ))
  }
</Routes>

and route constant file is as follows

const navbarRoutes = [
  {
    path: '/',
    text: ''user,
    exact: true,
    main: <User>
  },
  {
    path: '/useraddress',
    text: ''useraddress,
    exact: true,
    main: <useraddress>
  }
]

How can I implement nested route or child route inside "/useraddress" and inside App.js as well?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

长安忆 2025-02-18 19:15:00

因此，这是您的解决方案：

我认为您的问题是不要称呼这样的组件。

基本上，我们有这样的纳维尔路径：

// I import all the components before 
const navbarRoutes = [
  {
    path: "/",
    element: Welcome
  },
  {
    path: "/about",
    element: About
  }
];

路径和一个元素（顺便说一下，我认为我们不再需要确切的属性）。然后，我们将其映射到放置browserrouter的位置，

<BrowserRouter>
  <Routes>
    {navbarRoutes.map((T) => (
      <Route key={T.path} path={T.path} element={<T.element />} />
    ))}
  </Routes>
</BrowserRouter>

您可以在此 codesandbox ，索引有一个路由 /周围，另一个路由:)

ps： t 只是一个参数

So here is your solution :

I think that your problem was to not call the Component like this <route.main />

Basically we have navbarRoutes like this :

// I import all the components before 
const navbarRoutes = [
  {
    path: "/",
    element: Welcome
  },
  {
    path: "/about",
    element: About
  }
];

A path and an element (by the way I think that we don't need the exact property no more). Then we map it where we have put our BrowserRouter

<BrowserRouter>
  <Routes>
    {navbarRoutes.map((T) => (
      <Route key={T.path} path={T.path} element={<T.element />} />
    ))}
  </Routes>
</BrowserRouter>

You can try it out on this codeSandbox, there is a route /about and another one at the index :)

PS : the T is just a parameter you can call it whatever you want

回复收藏 0 原文

痴梦一场 2025-02-18 19:15:00

使用此模式，也可以手动进行。不要使用循环

<Routes>
      <Route exact path="/" element={<PrivateRoute />}>
        <Route exact path="/" element={<Home />} />
        <Route path="/upcomingTournament" element={<Home />} />
        <Route path ="/deposit" element={<Deposit />} />
        <Route path='/withdraw' element={<Withdraw/>} />
        <Route path='/deleteData' element={<DeleteOldData />} />
        <Route path="/createMatch" element={<CreateMatch />} />
        <Route path="/shop" element={<Shop />} />
        <Route path="/roomPass" element={<RoomDetails/>} />
        <Route path="/refund/:id" element={<Refund />} />
        <Route path="/result/:id" element={<Result />} />
      </Route>
      <Route path="/login" element={<Login />} />
    </Routes>

Use this pattern and also do it manually. Don't use loop

<Routes>
      <Route exact path="/" element={<PrivateRoute />}>
        <Route exact path="/" element={<Home />} />
        <Route path="/upcomingTournament" element={<Home />} />
        <Route path ="/deposit" element={<Deposit />} />
        <Route path='/withdraw' element={<Withdraw/>} />
        <Route path='/deleteData' element={<DeleteOldData />} />
        <Route path="/createMatch" element={<CreateMatch />} />
        <Route path="/shop" element={<Shop />} />
        <Route path="/roomPass" element={<RoomDetails/>} />
        <Route path="/refund/:id" element={<Refund />} />
        <Route path="/result/:id" element={<Result />} />
      </Route>
      <Route path="/login" element={<Login />} />
    </Routes>

回复收藏 0 原文

~没有更多了~