探索React Router:实现动态二级路由

我有一个路由配置的二维数组,想根据这个数组结合路由组件来动态生成路由,应该怎么样实现。在 React Router 6 中渲染二级路由的方式跟 React Router 65相比有一些变化,但核心思路仍然是利用 Route 组件和路由嵌套的方式。下面是具体的步骤:

  1. 定义路由数组
js 复制代码
const routes = [
  {
    path: '/',
    element: <Home />
  },
  {
    path: '/about',
    element: <About />
  },
  {
    path: '/products',
    element: <Products />,
    children: [
      {
        path: 'list',
        element: <ProductList />
      },
      {
        path: 'details/:id',
        element: <ProductDetails />
      }
    ]
  }
]

注意,这里我们使用 element 属性代替了之前版本中的 component 属性。

  1. App.js 中使用 RoutesRoute 组件渲染路由
js 复制代码
import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        {routes.map((route, index) => (
          <Route
            key={index}
            path={route.path}
            element={<route.element />}
          >
            {route.children && route.children.map((child, idx) => (
              <Route
                key={idx}
                path={`${route.path}/${child.path}`}
                element={<child.element />}
              />
            ))}
          </Route>
        ))}
      </Routes>
    </BrowserRouter>
  );
}

在上面的代码中,我们使用 Routes 组件包裹所有的 Route 组件。对于每个路由对象,我们渲染一个 Route 组件,并将 pathelement 属性传入。如果该路由对象包含子路由,我们使用嵌套的 Route 组件来渲染子路由。

注意,在 React Router 6 中,我们需要使用字符串模板字面量语法 ${route.path}/${child.path} 来拼接父路径和子路径。

  1. 在组件中渲染子路由
    对于需要渲染子路由的组件,例如 Products,我们可以使用 Outlet 组件作为子路由的占位符。
js 复制代码
import { Outlet } from 'react-router-dom';

function Products() {
  return (
    <div>
      <h1>Products</h1>
      <Outlet />
    </div>
  );
}

Outlet 组件会根据当前的 URL 路径渲染与之匹配的子路由。

通过上述步骤,我们就可以在 React Router 6 中动态渲染二级路由了。如果有更深层次的嵌套路由,只需要在 children 数组中继续添加路由配置即可。

相关推荐
遂心_7 小时前
深入理解 React Hook:useEffect 完全指南
前端·javascript·react.js
前端小书生9 小时前
React 组件渲染
前端·react.js
用户76787977373211 小时前
后端转全栈之Next.js SEO优化
react.js·next.js
遂心_15 小时前
深入浅出 querySelector:现代DOM选择器的终极指南
前端·javascript·react.js
遂心_15 小时前
DOM元素内容修改全攻略:从innerHTML到现代API的最佳实践
前端·javascript·react.js
YiHanXii16 小时前
React.memo 小练习题 + 参考答案
前端·javascript·react.js
知识分享小能手1 天前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
虫虫rankourin1 天前
在 create-react-app (CRA) 创建的应用中使用 react-router-dom v7以及懒加载的使用方法
前端·react.js
开心不就得了1 天前
React 状态管理
react.js·typescript
天天进步20151 天前
掌握React状态管理:Redux Toolkit vs Zustand vs Context API
linux·运维·react.js