Каталог статей
Передача параметров маршрута
Есть два способа передачи параметров ( следует отметить, что эти два способа — это API для функций-хуков, предусмотренных в Router6.x, а компоненты класса необходимо использовать через компоненты высокого порядка ) :
Методы динамической маршрутизации;
параметры проходов поиска ( строка запроса );
Метод 1. Концепция динамической маршрутизации означает, что путь маршрутизации не фиксирован :
Например, путь /detail соответствует компоненту Detail;
Если мы запишем путь как /detail/:id при сопоставлении с Маршрутом, то /detail/111 и /detail/123 смогут сопоставить Маршрут и отобразить его;
Мы называем это правило соответствия динамической маршрутизацией;
Обычно динамическая маршрутизация используется для передачи параметров маршрута.
- Настройка динамической маршрутизации
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>
)
}
- На странице перехода вы можете получить входящий идентификатор с помощью функции перехвата useParms. Поскольку сейчас мы используем компоненты класса, функцию перехвата использовать нельзя, поэтому нам нужно улучшить текущий компонент с помощью компонентов высокого порядка (только что упомянутых в предыдущая статья ) Здесь используется непосредственно инкапсуляция компонента первого порядка и код дается всем желающим )
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} />
}
}
- Используйте компоненты более высокого порядка для улучшения текущего компонента Detail, и вы можете получить переданный идентификатор через useParams.
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)
Способ 2: Поиск передает параметры ( то есть метод запроса строк ), который демонстрируется здесь в компоненте User.
- Объединение строки запроса при переходе по маршруту
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>
)
}
- Строку запроса необходимо получить с помощью функции-перехватчика useSearchParams, поэтому нам также необходимо использовать компоненты более высокого порядка для улучшения компонента User.
// 封装的高阶组件
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)
Файл конфигурации маршрутизации
В настоящее время все наши определения маршрутов выполняются напрямую с использованием компонента Route и добавления атрибутов .
Но такой подход сделает маршрутизацию очень запутанной.Мы надеемся поместить все конфигурации маршрутизации в отдельный файл для централизованного управления, например vue-router :
Вначале Router не предоставлял соответствующих API, поэтому для завершения работы нам нужно было использовать response-router-config;
В Router6.x нам предоставляется API useRoutes для выполнения соответствующих конфигураций;
Например, мы настраиваем следующие отношения сопоставления в отдельный файл
<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>
Сначала используйте API useRoutes для замены исходных компонентов Routes и Route. UseRoutes можно использовать непосредственно как функцию, но его можно использовать только в функциональных компонентах.
<div className='counter'>
{
useRoutes(routes)}
</div>
Затем настройте отношения сопоставления в маршруте/index.js.
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
Если мы загружаем некоторые компоненты асинхронно (отложенная загрузка, субупаковка), нам нужно использовать Suspense для переноса :
Например, мы выполняем отложенную загрузку (субподряд) Детали и Пользователя.
// import Detail from '../pages/Detail'
// import User from '../pages/User'
const Detail = React.lazy(() => import("../pages/Detail"))
const User = React.lazy(() => import("../pages/User"))
И вам также нужно использовать Suspense для переноса компонентов.
root.render(
<HashRouter>
<Suspense fallback={
<h3>loading</h3>}>
<App/>
</Suspense>
</HashRouter>
)