React-router-dom@6.x 多路由嵌套

React-router-dom@6.x 多路由嵌套

本文会以三级路由为例讲解最新版本的React-router-dom多级路由嵌套配置
你需要有一定的reac基础

三级路由数据结构

const routes = [
{
    id: 0,
    compontent: Home,
    path: '/home',
    title: '租房APP',
    children: [
      {
        id: 11,
        path: 'news',
        compontent: News,
        children: [{ id: 111, path: 'news', compontent: News }]
      }
    ]
  },
  {id: 1,compontent: CityList, title: "城市选择"}
 ]

为了方便组件二级路由和三级路由组件采用同一个组件News

路由组件的导入

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'

根组件

function App() {
  return (
    <div className="App">
    <Router>
      <Routes>
        {routes.map((item) => {
          return (
            <Route path={item.path} key={item.id} element={<item.compontent />}>
              {chilidrenRoute(item)}
            </Route>
          )
        })}
      </Routes>
     </Router>
    </div>
  )
}

新版本必须使用Routes组件进行包裹路由，可以有多个Routes出口,通过map方法遍历路由数组

编写渲染子路由函数childrenRoute

// 渲染子路由
function chilidrenRoute({ children }) {
  if (!children) {
    return null
  }
  return children.map((value) => {
    return (
      <Route path={value.path} element={<value.compontent />} key={value.id}>
        {chilidrenRoute(value)}
      </Route>
    )
  })
}

采用递归的方式将多重子路由进行渲染

子路由的出口OutLet组件

子路由需要一个在父路由组件中有一个出口最新版的react路由设立OutLet组件作为子路由的出口

class Home extends React.PureComponent {
  render() {
    return (
      <div className="HomePage">
        <p>我是home</p>
        <Outlet />
      </div>
    )
  }
}

按照步骤即可实现在新版react-router-dom的多重路由的渲染
本文为原创2022年4月18日