安装 : npm install --save react-router-dom
,引入了新的替代者:
,作用一样
必须要包裹
,二者必须配合使用
相当于一个if语句,当路径匹配成功后,呈现对应的组件
中新增一个属性caseSensitive
,作用:匹配时是否区分大小写,默认为false
改为
<Routes>
<Route path="/about" element={<About/>}></Route>
<Route path="/home" element={<Home/>}></Route>
</Routes>
作用: 只要
组件被渲染,就会修改路径,切换视图
replace
属性用于控制跳转的模式
5版本中重定向
6版本重定向
<Routes>
<Route path="/about" element={<About/>}></Route>
<Route path="/home" element={<Home/>}></Route>
<Route path="/" element={<Navigate to="/about"/>}></Route>
</Routes>
在5版本中只需要添加activeClassName
即可实现
在6版本中想要实现自定义高亮效果需要写成一个函数,该函数可以接收到一个参数,解构后可以获取isActive
属性
<NavLink to="/about" className={({isActive})=>isActive ? 'list-group-item xxx' : 'list-group-item'}>About</NavLink>
注意:只能在函数式组件中使用
在做项目的时候,通常创建一个文件专门存放路由规则在routes.js
import React from 'react'
import { NavLink, useRoutes } from "react-router-dom"
import Home from "./components/Home"
import About from "./components/About"
export default function App() {
// 根据路由表生成对应的路由规则
const element = useRoutes([
{
path: '/home',
element: <Home />
},
{
path: '/about',
element: <About />
},
{
path: '/',
element: <About />
}
])
return (
<div>
<div>
<div className="row">
<div className="col-xs-offset-2 col-xs-8">
<div className="page-header"><h2>React Router Demo</h2></div>
</div>
</div>
<div className="row">
<div className="col-xs-2 col-xs-offset-2">
<div className="list-group">
<NavLink to="/about" className="list-group-item">About</NavLink>
<NavLink to="/home" className="list-group-item">Home</NavLink>
</div>
</div>
</div>
<div className="col-xs-6">
<div className="panel">
<div className="panel-body">
{/* 将路由规则放入对应位置 */}
{element}
</div>
</div>
</div>
</div>
</div>
)
}
/
/
去指定子级路由组件呈现的位置const element = useRoutes([
{
path: '/home',
element: <Home />,
children:[
{
// 子级路径不要写 /
path:'message',
element:<Message/>
},
{
// 子级路径不要写 /
path:'news',
element:<News/>
}
]
},
{
path: '/about',
element: <About />
},
{
path: '/',
element: <About />
}
])
import {Outlet} from "react-router-dom"
// 在路由跳转的时候,跳转的路由不需要写父级的路径也不要写 /
<NavLink to="news" className="list-group-item">News</NavLink>
<NavLink to="message" className="list-group-item">Message</NavLink>
// 需要配合 去指定路由组件呈现的位置
<Outlet/>
{/* 传递params参数 */}
<NavLink to={`news/${state.title}/${state.contain}`}>跳转News</NavLink>
路由规则中依旧是需要进行占位
export const routes = [
{
path: '/home',
element: <Home />,
children:[
{
path:'news/:title/:contain',
element:<News/>
}
]
},
{
path: '/about',
element: <About />
},
{
path: '/',
element: <Navigate to="/about"/>
}
]
接收参数的时候使用useParams
import React from 'react'
import { useParams } from 'react-router-dom'
export default function News() {
let {title,contain} = useParams()
return (
<div>
<ul>
<li>标题: {title} -- 内容: {contain}</li>
</ul>
</div>
)
}
{/* 传递search参数 */}
<NavLink to={`news?title=${state.title}&contain=${state.contain}`}>跳转News</NavLink>
接收参数使用useSearchParams
import React from 'react'
import { useSearchParams } from 'react-router-dom'
export default function News() {
/*
和使用useState用法有点像
接收到的是一个数组
- 数组的第一个参数:接收search参数
- 数组的第二个参数:修改search参数的方法
*/
let [search,setSearch] = useSearchParams()
// 需要注意search参数还得通过get(key)才能取到数据
let title = search.get('title')
let contain = search.get('contain')
return (
<div>
<button onClick={()=>{setSearch('title=我是修改后的数据&contain=哈哈哈')}}>点我修改search参数</button>
<ul>
<li>标题: {title} -- 内容: {contain}</li>
</ul>
</div>
)
}
{/* 传递state参数 */}
<NavLink to='news' state={{title:state.title,contain:state.contain}}>跳转News</NavLink>
接收参数使用useLocation
import React from 'react'
import { useLocation } from 'react-router-dom'
export default function News() {
const {state:{title,contain}} = useLocation()
return (
<div>
<ul>
<li>标题: {title} -- 内容: {contain}</li>
</ul>
</div>
)
}
使用useNavigate
,通过调用它返回的函数实现编程式路由导航
import React, { useState } from 'react'
import {NavLink,Outlet,useNavigate} from "react-router-dom"
export default function Home() {
const [state] = useState({id:'001',title:'疫情消息',contain:'疫情快快走'})
const navigate = useNavigate()
function handleNav() {
/*
第一种写法
第一个参数指定具体跳转的路径
第二个参数配置对象
*/
navigate('news',{
replace:false,
state:{title:state.title,contain:state.contain}
})
/*
第二种写法
传入具体的数据实现前进、后退
*/
navigate(1)
navigate(-1)
}
return (
<div>
<h3>我是Home组件</h3>
<button onClick={handleNav}>跳转News</button>
<hr />
<Outlet/>
</div>
)
}
import { lazy, Suspense } from "react";
import { Navigate } from "react-router-dom";
// React 组件懒加载
const TodoList = lazy(() => import("../commponet/TodoList"));
const LazyTest = lazy(() => import("../commponet/LazyTest"));
interface Router {
name?: string;
path: string;
children?: Array<Router>;
element: any;
}
const routes: Array<Router> = [
{
path: "/todolist",
element: <TodoList/>,
},
{
path: "/lztest",
// element: ,
element: (
<Suspense fallback={<h2>正在加载中....</h2>}>
<LazyTest />
</Suspense>
),
},
{
path: "/",
element: <Navigate to="/home" />,
},
];
export default routes;
以上就是今天要讲的内容,希望对大家有所帮助!!!