React学习笔记12
目录
React学习笔记12
一、ReactRouter-路由导航
1.1、什么是路由导航
路由系统中的多个路由之间需要进行路由跳转，并且在跳转的同时有可能需要传递参数进行通信，同Vue中的路由导航
以一个case为例：点击button跳转至文章页
1.2、声明式导航
声明式导航是指通过在模板中 通过‘’组件描述出要跳转到哪里 去，例如后台管理系统的左侧菜单常用这种方式进行
<Link to="/article">文章</Link>语法说明：通过给组件的 to属性指定要跳转到路由path ，组件会被渲染为浏览器支持的a链接，如果需要传参直接 通过字符串拼接 的方式拼接参数即可
import { Link } from "react-router-dom"
const Login=()=>{
return (
<div>
登录页
<Link to="/article">跳转到文章页</Link>
</div>
)
}
export default LoginLogin>index.js
浏览器解析后的结果如图
1.3、编程式导航
通过‘useNavigate’钩子得到导航方法，然后通过调用方法以命令式的形式进行路由跳转，这种方式更为灵活
import { Link, useNavigate } from "react-router-dom"
const Login = () => {
const Navigate = useNavigate()
return (
<div>
登录页
<Link to="/article">跳转到文章页</Link>
<button onClick={() => Navigate('/article')}></button>
</div>
)
}
export default LoginLogin>index.js
编程式导航（命令式）的写法与Vue的Router除了命名之外基本一样，这里放出Vue作为对比
import { RouterLink, RouterView, useRouter } from 'vue-router'
const router = useRouter()
const jump=()=>{
router.push('/article')
}vue>router>index.js
二、ReactRouter-导航路由传参
2.1、searchParams传参
传参：
import { useNavigate } from "react-router-dom"
const Login = () => {
const Navigate = useNavigate()
return (
<div>
登录页
<button onClick={() => Navigate('/article?id=1001&name=jim')}>传参</button>
</div>
)
}
export default LoginLogin>index.js
接收：
import { useSearchParams } from "react-router-dom"
const Article = () => {
const [params] = useSearchParams()
const id = params.get(id)
return <div>文章页{id}</div>
}
export default ArticleArticle>index.js
2.2、params传参
定义传的参数名（重点）：
import Login from '../page/Login'
import Article from '../page/Article'
import { createBrowserRouter } from 'react-router-dom'
const router=createBrowserRouter([
{
path:'/login',
element:<Login></Login>
},
{
path:'/article/:id',
element:<Article></Article>
},
])
export default routerrouter>index.js
传参：
import { useNavigate } from "react-router-dom"
const Login = () => {
const Navigate = useNavigate()
return (
<div>
登录页
<button onClick={() => Navigate('/article/1001')}>传参</button>
</div>
)
}
export default LoginLogin>index.js
接收参数：
import { useParams } from "react-router-dom"
const Article = () => {
const params = useParams()
return <div>文章页{params.id}</div>
}
export default ArticleArticle>index.js
这和Vue中的传参几乎一样，记忆方式可以直接参考Vue路由传参
下一章：ReactRouter03