ReactRouter

news2025/5/26 11:40:39

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'