子路由配置

第1步在配置主路由的path属性后面加"/*"

<Route path='/des/*' element={<Suspense><Des /></Suspense>}></Route>

// src/router/index.jsx
import React, { lazy,Suspense } from 'react'
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import First from '../views/first/index.jsx'
const Des = lazy(() => import('../views/des/index.jsx'))
const Usercenter = lazy(() => import('../views/usercenter/index.jsx'))
export default function Index() {
    return (
            <Router>
                <Routes>
                    <Route path='/first' element={<First></First>}></Route>
                    <Route path='/des/*' element={<Suspense><Des /></Suspense>}></Route>
                    <Route path='/center' element={<Suspense><Usercenter /></Suspense>}></Route>
                    <Route path='/*' element={<First />}></Route>
                </Routes>
            </Router>
    )
}

第2步在主路由对应的组件中使用配置新的路由，子路由的访问path设置为子路由，该子路由是相对网址，它会相对于父级路由进行匹配。

// src/views/des/index.jsx
import React from 'react'
import {Routes,Route,useNavigate,Link} from 'react-router-dom'
import A from './A.jsx'
import B from './B.jsx'
export default function Index() {
  let navigate=useNavigate();
  let pageA=()=>{
    navigate('/des/a');
  }
  return (
   <div>
     <h1>Des 详情页</h1>
    <button onClick={pageA}>A</button>
    <Link to='/des/b'>B</Link>
    <Routes>
      <Route path='/a' element={<A />}></Route>
      <Route path='/b' element={<B />}></Route>
      <Route path='/*' element={<A />}></Route>
    </Routes>
   </div>
  )
}

将子路由和页面拆分

配置主路由的path属性后面加"/*"

// src/views/des/ziluyou.jsx
import { Routes, Route } from 'react-router-dom'
import A from './A.jsx'
import B from './B.jsx'

export default function ziluyou() {
    return (
        <Routes>
            <Route path='/a' element={<A />}></Route>
            <Route path='/b' element={<B />}></Route>
            <Route path='/*' element={<A />}></Route>
        </Routes>
    )
}

// src/views/des/index.jsx
import React from 'react'
import {useNavigate, Link } from 'react-router-dom'
import Ziluyou from './ziluyou.jsx';
export default function Index() {
  let navigate=useNavigate();
  let pageA=()=>{
    navigate('/des/a');
  }
  return (
   <div>
     <h1>Des 详情页</h1>
    <button onClick={pageA}>A</button>
    <Link to='/des/b'>B</Link>
    <Ziluyou></Ziluyou>
   </div>
  )
}

将子路由统一放在主路由设置的文件中

// src/router/index.jsx
import React, { lazy,Suspense } from 'react'
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
const Test = lazy(() => import('../views/test/index.jsx'))
const Testc = lazy(() => import('../views/test/C.jsx'))
const Testd = lazy(() => import('../views/test/D.jsx'))
export default function Index() {
    return (
            <Router>
               
                    <Route path='/test' element={<Suspense><Test /></Suspense>}>
                        <Route path='/test/c' element={<Suspense><Testc /></Suspense>}></Route>
                        <Route path='/test/d' element={<Suspense><Testd /></Suspense>}></Route>
                    </Route>
                    
            </Router>
    )
}

// src/views/test/index.jsx
import React from 'react'
import {Outlet,Link} from 'react-router-dom'
export default function index() {
  return (
    <div>
        <h1>test</h1>
        <Link to='/test/c'>C</Link>
        <Link to='/test/d'>D</Link>
        <Outlet></Outlet>
    </div>
  )
}