配置路由
1.安装依赖
npm i react-router-dom
2.在index.js中BrowserRouter把<App />包裹住
3.在页面使用<Link>编写路由链接<Route>
注:使用<Route>注册路由,必须用<Routes>包裹住
useNavigate()函数式编程式路由跳转
注意:参数只能传state
1.导入useNavigate
import {useNavigate } from 'react-router-dom'
const navigate = useNavigate()
//navigate (1) 前进1
//navigate (-1) 后退1
//detail是路由名称,使用路由表,子路由前面不能加'/'
function detail(){
navigate('detail',{
replace:false,
state:{
id:123,
name:'lxy',
age:18
}
})
}
类式编程式路由跳转、传参
## 跳转方式
1.this.props.history.push() //可以后退
2.this.props.history.replace() //不可以后退
3.this.props.history.goBack() //后退
4.this.props.history.goForward() //前进
5.this.props.history.go()
## 1.params参数
路由链接:this.props.history.push(`/home/18/lxy`)
注册路由(声明参数):<Route path="/home/:age/:name" component={Home}/>
接收参数:this.props.match.params参数
## 2.search参数
路由链接:this.props.history.push(`/home?age=18&name=lxy`)
注册路由(无需声明参数):<Route path="/home" component={Home}/>
接收参数:
1.导入qs库:import qs from "qs"
2.this.props.location.search
## 2.search参数
路由链接:this.props.history.push(`/home`,{age:18,name:'lxy'})
注册路由(无需声明参数):<Route path="/home" component={Home}/>
接收参数:this.props.location.state
备注:刷新参数也在
Navigate(路由重定向)
1.导入
import {Navigate} from "react-router-dom";
2.使用
<Route path="/" element={<Navigate to="/home" />} />
NavLink路由高亮,有两种写法
方式1:回调函数,isActive是自定义参数
<NavLink className={({isActive}) => isActive?'active_router':'NavLink'} to="/home">home</NavLink>
方式2:绑定方法
HTML:
<NavLink className={computedClassName} to="/about">about</NavLink>
JS:
function computedClassName({ isActive }) {
return isActive ? "active_router" : "NavLink";
}
useRoutes路由表
1.在src目录下新建routes文件夹,在routes文件夹新建index.js(用于管理路由)
routes/index.js文件
import Home from "../pages/Home";
import About from "../pages/About";
import { Navigate } from "react-router-dom";
const routes = [
{
path: "/home",
element: <Home />,
},
{
path: "/about",
element: <About />,
},
{
path: "/",
element: <Navigate to="/home" />,
},
];
export default routes;
页面使用:
嵌套路由
路由表:
注意:子路由的path的值不能加‘/’
页面使用:
注意:这里跳转子路由也不能加'/'
params参数(参数可见,需要声明)
传参数
<Link to={`detail/${item.id}/${item.name}/${item.age}`}>{item.name}</Link>
路由配置参数
{
path: "detail/:id/:name/:age",
element: <Detail />,
},
页面接收参数
import { useParams } from "react-router-dom";
const{id,name,age} = useParams()
search参数(参数可见,不用声明)
传参数
<Link to={`detail?id=${item.id}&name=${item.name}&age=${item.age}`}>{item.name}</Link>
页面接收参数
import { useSearchParams } from "react-router-dom";
const [search,setSearch] = useSearchParams()
let id = search.get('id')
const name = search.get('name')
const age = search.get('age')
//setSearch是修改search参数的方法
function click(){
setSearch('id=4&name=ddd&age=16')
}
state参数(参数不可见,不用声明)
传参数
<Link to="detail" state={{id:item.id,name:item.name,age:item.age}}>{item.name}</Link>
页面接收
import { useLocation } from "react-router-dom";
const {id,name,age} = useLocation().state