So verwalten Sie unser Routing zentral mit React-Router-Dom v6 useRoutes HOOK

Vorwort

Dieser Artikel richtet sich hauptsächlich an Studenten, die gerade React-Router-Dom v6 gelernt haben

In „react“ können wir „react-router-config“ verwenden, um unsere Routen in der v5-Version zentral zu verwalten. Da nachfolgende Versionen wie v6 jedoch nicht unterstützt werden, können wir unseren integrierten Hook useRoutes für die zentralisierte Routing-Verwaltung verwenden.

---

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

1. Allgemeines Routenschreiben

Wir verwenden <BrowserRouter> für das App-Wrapping

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

2. Verwenden Sie 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

---

Zusammenfassung: useRoutes kann die Routing-Tabelle verwenden, um die Struktur <Routes>...</Routes> zu generieren
und entsprechende Routing-Regeln basierend auf der Routing-Tabelle zu generieren. Für uns ist es bequemer, das Routing zentral zu verwalten.