1：NavLink-Link
import React from 'react'
import { NavLink,Link } from 'react-router-dom'
export default function App(){
return (
<NavLink to={'/home'}>home</NavLink>
<NavLink to={'/about'}>about</NavLink>
<Link to={'/link'}>link</Link>
)
}2:Routes_Route
<NavLink to={'/home'}>home</NavLink>
<NavLink to={'/about'}>about</NavLink>
<Routes>
<Route path='/home' element={<Home />}></Route>
<Route path='/about' element={<About />}></Route>
</Routes>
3：路由高亮
import React from 'react'
import { NavLink,Route,Routes } from 'react-router-dom'
import About from './About'
import Home from './Home'
export default function App() {
const activeLink = (prop) =>{
// 函数。在绑定的NavLink组件渲染时候执行
console.log('style run');
console.log(prop);
// isActive: false/true true 表示当前 NavLink 被激活。
let isActive = prop.isActive;
let obj = {};
if(isActive){
obj = {
color:'red',
fontWeight:900,
background:'orange'
}
}else {
obj = {
color:'black',
fontWeight:300,
background:'#fff'
}
}
// 返回：虚拟样式对象。作用：设置路由高亮显示的
return (obj)
}
return (
<div>
<ul>
<li>
{/*
style 作用：设置路由高亮样式
赋值：定义函数
函数在NavLink渲染时候执行
函数执行传实参，为对象，isActive isPending
isActive 表示路由是否被激活，true 激活，false 没激活
返回值：虚拟样式对象
有多个style 执行多次
*/}
<NavLink style={activeLink} to={'/home'}>home</NavLink>
</li>
<li>
<NavLink style={activeLink} to={'/about'}>about</NavLink>
</li>
</ul>
<div>
<Routes>
<Route path='/home' element={<Home />}></Route>
<Route path='/about' element={<About />}></Route>
</Routes>
</div>
</div>
)
}
4:编程时导航
import React from 'react'
// useNavigate 新增的hook函数
import { useNavigate } from 'react-router-dom'
export default function Home() {
// useNavigate 返回函数
let Navigate = useNavigate()
const linkAbout = ()=>{
setTimeout(() => {
Navigate('/about')
}, 2000);
}
return (
<div>
{/*
Navigate()
参数：链接地址
作用：跳转链接
*/}
<button onClick={linkAbout}>点击跳转about</button>
<button onClick={()=>{}}>标签方式跳转</button>
</div>
)
}
5：params传参
import React from 'react'
import { useParams } from 'react-router-dom'
export default function About() {
// useParams() 作用：获取params参数，返回，参数独享
let params = useParams();
console.log(params);
return (
<div>About
<h1>接受params参数{params.id} </h1>
</div>
)
}
6:search参数
import React from 'react'
import { useParams,useSearchParams } from 'react-router-dom'
export default function About() {
// search参数
// useSearchParams()作用:获取search参数,返回值:数组
// 0: 参数对象, .get(key) 获取具体参数
// 1: setSearch() 更改search 参数
let [search,setSearch] = useSearchParams()
console.log(search.get('id')); // 获取id,如果还有其他参数执行 get方法多次
console.log(setSearch);
const onSetSearch = function(){
// setSearch(options)
// 参数: search参数对象
setSearch({
id:5
})
}
return (
<div>About
<h1>接受search参数 {search.get('id')} </h1>
<button onClick={()=>{onSetSearch()}}>使用setSearch</button>
</div>
)
}
7:嵌套路由
import React,{useState} from 'react'
import { useLocation } from 'react-router-dom'
export default function About() {
/**
* useLocation() 作用:获取包装后的location对象
* hash
* pathname 路由地址
* state state参数
* search search 参数
*
*/
let location = useLocation();
console.log(location);
// 获取state 参数
let id = location.state.id;
let [_id,setid] = useState(id)
console.log(_id);
const changeState = function(){
// 为了修改state参数赋值.
location.state.id = 7;
// 处理页面展示
setid(7)
}
return (
<div>About
{/* <h1>接受params参数{params.id} </h1> */}
<h1>接受state参数 {_id} </h1>
<button onClick={()=>{changeState()}}>更改state参数</button>
</div>
)
}
//7_src_嵌套路由8:outlet嵌套路由
import React from 'react'
import { NavLink,Outlet } from 'react-router-dom'
export default function Home() {
return (
<div>
<ul>
<li>
<NavLink to={'/home/list'}>list</NavLink>
</li>
<li>
<NavLink to={'/home/item'} >item</NavLink>
</li>
</ul>
<div>
{/* 注册路由 */}
{/*
作用: 展示注册的子路由组件
*/}
<Outlet />
</div>
</div>
)
}
9:路由配置_嵌套路由
import { useRoutes } from 'react-router-dom';
import About from './About'
import Home from './Home'
import List from './list'
import Item from './item'
export default function Router(){
const routes = [
{
path:'/home',
element: (<Home />),
// 实现嵌套路由。
children: [
{
path:'list',// /home.list
element:(<List />)
},{
path:'/home/item',
element: (<Item />)
}
]
},{
path:'/About',
element:(<About />),
}
]
// useRoutes() 作用 相当于 Routes组件.
// 参数;元组,
// 数组元素路由配置对象.
// path 设置匹配路由组件的地址
// element 注册路由组件
// children 嵌套路由
// .....
// 返回值:注册略有的虚拟dom
return useRoutes(routes)
}
10:重定向
import { useRoutes,Navigate } from 'react-router-dom';
import About from './About'
import Home from './Home'
import List from './list'
import Item from './item'
import NotFount from './404'
// 注意：路由匹配规则，精准匹配，
function Router(){
const routes = [
{
path:'/home',
element: (<Home />),
// 实现嵌套路由。
children: [
{
path:'list',// /home.list
element:(<List />)
},{
path:'/home/item',
element: (<Item />)
}
]
},{
path:'/About',
element:(<About />),
},{
path:'/',
// Navigate 实现重定向
element:(<Navigate to="/home"/>)
},{// 处理404
path:"*", // 匹配所有路径，优先级最低
// 路由渲染的优先级。
element: (<NotFount />)
}
]
// useRoutes() 作用 相当于 Routes组件.
// 参数;元组,
// 数组元素路由配置对象.
// path 设置匹配路由组件的地址
// element 注册路由组件
// children 嵌套路由
// .....
// 返回值:注册略有的虚拟dom
return useRoutes(routes)
}
export default Router// 路由权限验证
// 基于身份动态渲染NavLink,
/**
* admin:
* 用户管理
* 商品管理
* 购物车管理
*
* 其他用户：
* 购购物车管理
*
* 从到1搭建后台管理系统
*/