ReactRouter-编程知识

ReactRouter

React-Router

概念：一个路劲path对应一个组件component 当我们在浏览器中访问一个path的时候，path对应的组件会在页面中进行渲染
路由语法：

import {createBrowserRouter, RouterProvider} from 'react-router-dom'// 1. 创建router实例对象并且配置路由对应关系
const router = createBrowserRouter([{path: '/login',element: <div>我是登录页</div>// 支持组件或jsx语法}，{path: '/article',element: <div>我是文章页</div>}
])
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(<React.StrictMode><RouterProvider router={router}></RouterProvider></React.StrictMode>
)

路由导航

声明式导航

声明式导航是指通过在模板中通过<Link/> 组件描述出要跳转到哪里去，比如后台管理系统的左侧菜单通常使用这种方式进行

<Link to= "/article">文章</Link>
// 语法说明：通过给组件的to属性指定要跳转到路由path，组件会被渲染为浏览器支持的a链接，如果需要传参直接通过字符串拼接的方式拼接参数即可

编程式导航

编程式导航是指通过’useNavigate’钩子得到导航方法，然后通过调用方法以命令式的形式进行路由跳转，比如在登录请求完毕之后跳转就可以选择这种方式，更加灵活，语法如下：

import { useNavigate } from "react-router-dom"const Login = () => {const navigate = useNavigate() return (<div>我是登录页<button onClick={() => navigate('/article')}>跳转至文章</button>// 语法说明： 通过调用navigate方法传入地址path实现跳转</div>)
}

路由导航传参

searchParams传参

// 传参
navigate('/article?id==1001&name=jack')
// 获取参数
const [params] = useSearchParams()
// 获取参数id
let id = params.get('id')
// 获取参数name
let name = params.get('name')

params传参

// 传递一个参数
navigate('/article/1001')
// 需要在配置路由路径时添加占位符
const params = useParams()
let id = params.id// 传递多个参数
navigate('/article/1001/jack')
const params = useParams()
let id = params.id
let name = params.name
// 在路由里配置
path: '/article/:id/:name'