React中的路由嵌套和手动实现路由跳转的方式详解

<Routes>
  <Route path='/' element={<Navigate to="/home"/>}></Route>
  
  {/* 配置二级路由 */}
  <Route path='/home' element={<Home/>}>
    <Route path='/home' element={<Navigate to="/home/recommend"/>}/>
    <Route path='/home/recommend' element={<HomeRecommend/>}/>
    <Route path='/home/ranking' element={<HomeRanking/>}/>
  </Route>
  
  <Route path='/about' element={<About/>}/>
  <Route path='/profile' element={<Profile/>}/>
  <Route path='*' element={<Notfound/>}/>
</Routes>

// home组件

import { Link, Outlet } from 'react-router-dom'

export class Home extends PureComponent {
  render() {
    return (
      <div>
        <h2>Home</h2>
        <Link to="/home/recommend">推荐</Link>
        <Link to="/home/ranking">排行</Link>
        <Outlet/>
      </div>
    )
  }
}

import { useNavigate } from "react-router-dom"

// 封装高阶组件
export default function withRouter(WrapperComponent) {
  return function(props) {
    // 在函数组件中通过hook拿到navigate对象
    const naviagte = useNavigate()
    // 将获取到的navigate放到一个对象中
    const router = {naviagte}

    return <WrapperComponent {...props} router={router} />
  }
}

export class App extends PureComponent {
  navigateTo(path) {
    // 经过高阶组件增强的组件中, 可以在props中拿到navigate
    const { naviagte } = this.props.router
    // 调用navigate
    naviagte(path)
  }

  render() {
    return (
      <div className='app'>
        <div className='header'>
          <Link to="/home">首页</Link>
          <Link to="/about">关于</Link>
          <Link to="/profile">我的</Link>

          {/* 发生点击事件时, 将路劲传递过去 */}
          <button onClick={() => this.navigateTo("/category")}>分类</button>
          <span onClick={() => this.navigateTo("/order")}>订单</span>
        </div>

        <div className='counter'>
          <Routes>
            {/* 当默认路径 / 时, 重定向到home页面 */}
            <Route path='/' element={<Navigate to="/home"/>}></Route>
            {/* 配置二级路由 */}
            <Route path='/home' element={<Home/>}>
              <Route path='/home' element={<Navigate to="/home/recommend"/>}/>
              <Route path='/home/recommend' element={<HomeRecommend/>}/>
              <Route path='home/ranking' element={<HomeRanking/>}/>
            </Route>
            <Route path='/about' element={<About/>}/>
            <Route path='/profile' element={<Profile/>}/>
            <Route path='/category' element={<Category/>}/>
            <Route path='/order' element={<Order/>}/>
            {/* 当上面路径都没有匹配到时, 显式Notfound组件 */}
            <Route path='*' element={<Notfound/>}/>
          </Routes>
        </div>

        <div className='footer'>footer</div>
      </div>
    )
  }
}

// 使用高阶组件对App组件进行增强
export default withRouter(App)