如何使用react-router-dom v6 useRoutes HOOK 集中式管理我们的路由

前言

这篇文章主要是对刚学习react-router-dom v6版本的同学

在react中我们在v5版本可以使用react-router-config对我们的路由进行集中式管理。但是不支持后续的版本，比如v6，我们可以使用我们的内置hook useRoutes 来进行集中式路由管理。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、一般路由写法

对App我们使用<BrowserRouter>进行包裹

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
     <App />
</BrowserRouter>
  
);

import React, { memo } from 'react'
import { Route, Routes,Navigate } from 'react-router-dom'
import Home from './pages/Home'
import About from './pages/About'
import Detail from './pages/Detail'


const App = memo(() => {
  return (
    <div>
      <Routes>
        <Route path='/home' element={<Home></Home>}></Route>
        <Route path='/about' element={<About></About>}></Route>
        <Route path='/detail' element={<Detail></Detail>}></Route>
        <Route path='/' element={<Navigate to="/home"></Navigate>}></Route> 
        {/* 路由重定向 */}
     </Routes> 
    </div>
  )
})

export default App

二、使用useRoutes

import { useRoutes,Navigate } from "react-router-dom";
import Home from "../pages/Home";
import Detail from "../pages/Detail";
import About from "../pages/About";

import React, { memo } from 'react'

const DefineRoutes = memo(() => {
const routes= useRoutes(
    [
      {
        path: '/Home',
        element:<Home></Home>
      },
      {
        path: '/Detail',
        element: <Detail></Detail>
      },
      {
        path: '/About',
        element:<About></About>
      },
      {
        path: '/',
        element:<Navigate to='/Home'></Navigate>
    }
    ]
  )
  return routes
})

export default DefineRoutes 

import React, { memo } from 'react'
import DefineRoutes from './router'
const App = memo(() => {
  return (
    <div>
      <DefineRoutes></DefineRoutes>
    </div>
  )
})

export default App

---

总结：useRoutes可以用路由表生成<Routes>...</Routes>结构
根据路由表生成对应的路由规则。更加方便我们集中管理路由。