ReactRouter

React-Router

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

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

路由导航

声明式导航

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

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

编程式导航

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

import { useNavigate } from "react-router-dom"
const Login = () => {
    const navigate = useNavigate() 
    return (
    	

        	我是登录页
            () = navigate('/article')}>跳转至文章
            // 语法说明： 通过调用navigate方法传入地址path实现跳转
        
    )
}

路由导航传参

• 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'
    

    嵌套路由

    1. 概念：在一级路由中又内嵌了其他路由，这种关系就叫做嵌套路由，嵌套至一级路由内的路由又称作二级路由

    嵌套路由配置

    • 使用children属性配置路由嵌套关系
    • 使用组件配置二级路由渲染位置

      

      ReactRouter - 默认二级路由

      1. 当访问的是一级路由时，默认的二级路由组件可以得到渲染，只需要在二级路由的位置去掉path，设置index属性为true，如下：

         

      ReactRouter - 404 路由配置

      1. 概念：当浏览器输入url的路径在整个路由配置中都找不到对应的path，为了用户体验，可以使用404兜底组件进行渲染
      2. 实现步骤：
         • 准备一个NotFound组件
         • 在路由表数组的末尾，以*号作为路由path配置路由

           

      ReactRouter - 两种路由模式