React中路由的参数传递路由的配置文件详解

render() {
  return (
    <div className='app'>
      <div className='header'>
        <Link to="detail/123">详情123</Link>
        <Link to="detail/321">详情321</Link>
        <Link to="detail/aaa">详情aaa</Link>
      </div>

      <div className='counter'>
        <Routes>
          <Route path='/detail/:id' element={<Detail/>}/>
        </Routes>
      </div>

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

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

export default function withRouter(WrapperComponent) {
  return function(props) {
    const naviagte = useNavigate()
    const params = useParams()
    const router = {naviagte, params}

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

import React, { PureComponent } from 'react'
import withRouter from '../hoc/with_router'

export class Detail extends PureComponent {
  render() {
    // 获取到params
    const { params } = this.props.router

    return (
      <div>
        <h2>Detail</h2>
        {/* 通过params获取到id并展示 */}
        <h2>id: {params.id}</h2>
      </div>
    )
  }
}

export default withRouter(Detail)

render() {
  return (
    <div className='app'>
      <div className='header'>
        <Link to="/user?name=chenyq&age=18&height=1.88">用户</Link>
      </div>

      <div className='counter'>
        <Routes>
          <Route path='/user' element={<User/>} />
        </Routes>
      </div>

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

// 封装的高阶组件

import { useNavigate, useParams, useSearchParams } from "react-router-dom"

export default function withRouter(WrapperComponent) {
  return function(props) {
    // 1.导航
    const naviagte = useNavigate()

    // 2.动态路由的参数
    const params = useParams()

    // 3.查询字符串的参数
    const [searchParams] = useSearchParams()
    const query = Object.fromEntries(searchParams.entries)

    const router = {naviagte, params, query}
    return <WrapperComponent {...props} router={router} />
  }
}

import React, { PureComponent } from 'react'
import withRouter from '../hoc/with_router'

export class User extends PureComponent {
  render() {
    // 获取高阶组件中的query
    const { query } = this.props.router

    return (
      <div>
        <h2>User</h2>
        {/* 通过query获取参数 */}
        <h2>参数: {query.name}-{query.age}-{query.height}</h2>
      </div>
    )
  }
}

export default withRouter(User)

<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/>}/>
    <Route path='/detail/:id' element={<Detail/>}/>
    <Route path='/user' element={<User/>} />
    {/* 当上面路径都没有匹配到时, 显式Notfound组件 */}
    <Route path='*' element={<Notfound/>}/>
  </Routes>
</div>

<div className='counter'>
  {useRoutes(routes)}
</div>

import { Navigate } from "react-router-dom"
import Home from '../pages/Home'
import About from '../pages/About'
import Profile from '../pages/Profile'
import Notfound from '../pages/Notfound'
import HomeRecommend from '../pages/HomeRecommend'
import HomeRanking from '../pages/HomeRanking'
import Category from '../pages/Category'
import Order from '../pages/Order'
import Detail from '../pages/Detail'
import User from '../pages/User'

const routes = [
  {
    path: "/",
    element: <Navigate to="/home"/>
  },
  {
    path: "/home",
    element: <Home/>,
    children: [
      {
        path: "/home",
        element: <Navigate to="/home/recommend" />
      },
      {
        path: "/home/recommend",
        element: <HomeRecommend/>
      },
      {
        path: "/home/ranking",
        element: <HomeRanking/>
      }
    ]
  },
  {
    path: "/about",
    element: <About/>
  },
  {
    path: "/profile",
    element: <Profile/>
  },
  {
    path: "/category",
    element: <Category/>
  },
  {
    path: "/order",
    element: <Order/>
  },
  {
    path: "detail/:id",
    element: <Detail/>
  },
  {
    path: "/user",
    element: <User/>
  },
  {
    path: "*",
    element: <Notfound/>
  }
]

export default routes

// import Detail from '../pages/Detail'
// import User from '../pages/User'

const Detail = React.lazy(() => import("../pages/Detail"))
const User = React.lazy(() => import("../pages/User"))

root.render(
  <HashRouter>
    <Suspense fallback={<h3>loading</h3>}>
      <App/>
    </Suspense>
  </HashRouter>
)