目录
导航
1、声明式导航
<Link>和 <NavLink> 实现路由的跳转 是声明式导航
Navlink to={ 你要跳转的页面 }>
// Navlink自带高亮效果.2、编程式导航
// 导入useNavigate 从react-router-dom
import { useNavigate } from 'react-router-dom'
// 在函数内获取, 相当于history跳路由
var navigate = useNavigate()
// 点击跳路由
navigate('/login')
navigate({ pathname:'/login' })路由传参
1、动态路由传参 数据都不会丢失
// 路由地址后面拼接参数
{
path:'/detail/:id',
}
// 导入 useNavigate 从react-router-dom库
import { useNavigate } from 'react-router-dom'
// 获取并使用
var navgiate = useNavigate()
navigate('/detail/' + 8888 )
// 详情页接受参数,使用useParams
import { useParams } from 'react-router-dom'
var params = useParams()
console.log( params )2、查询字符串传参（query传参）
// 传参
navgiate( '/detail?id=999&name=张三' )
// 获取参数
import { useLocation } from 'react-router-dom'
var location = useLocation()
console.log(location)
// useSearchParams 获取固定路由中search参数
var [ searchParams, setSearchParams ] = useSearchParams()
console.log( searchParams.get('id'))3、state 传参
<NavLink to='/detail' state={
{ id=666 }}> 跳转到详情页 </NavLink>安装导入
// 安装路由
npm i react-router-dom --save
// 导入路由管理组件,二选一
import { BrowserRouter,HashRouter } from 'react-router-dom'
// 根组件包裹 理由管理组件
<>
<BrowserRouter>
<App />
</BrowserRouter>
</>1、第一种写法：直接在App.tsx组件中配置路由规则
// App.tsx组件
// 从react 导入 lazy和Suspense
import React,{Component,lazy,Suspense} from 'react';
// lazy和Suspense必须配合使用. 导入后必须使用Suspense包裹路由,否则会报错
// 导入路由组件
import { Routes,Route,Navigate,useRoutes } from 'react-router-dom'
// v5中的Switch替换为Routes
// v5中的Redirect替换为Navigate
// component属性替换为element,并且它的值必须是<>形式
// 懒加载组件
var Index = lazy(()=>import('./views/Index'))
var Login = lazy(()=>import('./views/Login'))
var NotFound = lazy(()=>import('./views/NotFound'))
// 二级路由想要显示,必须在所对应的一级路由组件内放一个渲染出口,类似于vue中的RouterView
<Outlet />
return (
<div className="app">
{/* 定义路由规则 */}
<Suspense fallback={<div>loading...</div>}>
<Routes >
<Route path='/index' element={<Index />}>
{/* 二级路由嵌套 */}
<Route path='/index/home' element={<Home />}></Route>
<Route path='/index' element={<Navigate to="/index/home" />}></Route>
<Route path='*' element={<NotFound />}></Route>
</Route>
<Route path='/login' element={<Login />}></Route>
<Route path='/' element={<Navigate to="/index" />}></Route>
<Route path='*' element={<NotFound />}></Route>
</Routes>
</Suspense>
</div>
)二级路由想要显示,必须在所对应的一级路由组件内放一个渲染出口,
类似于vue中的RouterView <Outlet />
2、第二种写法：配置路由表， // 抽离路由
第1步：在router文件下,新建路由表 routeConfig.tsx
import {lazy} from 'react'
import {Navigate} from 'react-router-dom'
var Index = lazy(()=>import('../views/Index'))
var Login = lazy(()=>import('../views/Login'))
var NotFound = lazy(()=>import('../views/NotFound'))
// 二级路由
var Home = lazy(()=>import('../views/Index/Home'))
//路由配置表
export default [
{
path:'/index',
element: <Index />,
children:[
{
path:'/index/home',
element: <Home />,
},
{
path:'/index',
element: <Navigate to="/index/home" />
},
{
path:'*',
element: <NotFound />
},
]
},
{
path:'/login',
element: <Login />
},
{
path:'/',
element: <Navigate to="/index" />
},
{
path:'*',
element: <NotFound />
},
]第2步：在 App.tsx 组件生成路由规则
// 导入路由表
import routeConfig from './router/routeConfig'
import { useRoutes } from 'react-router-dom'
<Suspense fallback={<div>loading...</div>}>
{/* useRoutes() 一次性生成整个项目的路由规则 */}
{ useRoutes( routeConfig )}
</Suspense>
// 二级路由想要显示,必须在所对应的一级路由组件内放一个渲染出口,类似于vue中的RouterView
<Outlet />二级路由想要显示,必须在所对应的一级路由组件内放一个渲染出口,
类似于vue中的RouterView <Outlet />