react-router-dom@6

路由配置

嵌套路由：路由根据层级嵌套可以实现路由嵌套 (v5版本子路由写在父路由path值上)
索引路由: 父组件的默认路由或者子路由的路径都不匹配时渲染
无匹配路由：当路由的路径都不匹配时渲染 (v6版本废弃了Redirect重定向)

import React from "react";
import ReactDom from 'react-dom';
import App from './App';
import {BrowserRouter, Route, Routes} from 'react-router-dom'
import Home from "./pages/Home";
import About from "./pages/About";
import News from "./pages/About/News";
import Message from "./pages/About/Message";
import Detail from "./pages/About/Message/Detail";

ReactDom.render(
  
    {/* Routes代替v5版本Switch */}
    
      {/* 一级路由 */}
      }>
        {/* 二级路由 */}
        }>
        }>
          {/* 三级路由 */}
          }>
            {/* 路由路径接收params参数 */}
            }>
            {/* 索引路由：父组件的默认路由 子路由的路径都不匹配时 */}
            您还没选择任意选项
}>
          
          }>
        
        {/* 无匹配路由 */}
        无效路径
}>
      
    
  ,
  document.getElementById('root')
)

路由使用

outlet: 根据实际路由url自动选择组件，主要用于嵌套路由，类似Vue Router中的

import React, { Component } from 'react'
import { Outlet } from 'react-router-dom'

export default class About extends Component {
  render() {
    return (
      
        Message
        News
        {/* Outlet为路由匹配组件占位符 */}
        
      
    )
  }
}

路由参数(url参数)

( v6版本无法通过 this.props.location.search(state) 获取路由参数 )

params参数：

路由链接(Navlink) 的 to 属性通过 /${val} 的形式传递
注册路由(Route) 的 path 属性通过 :val 的形式声明接收
获取路由传递的params参数

let params = useParams()
console.log(params)

search参数(搜索参数)(无需声明接收)

路由链接的 to 属性通过 ?name=zs&age=18 的形式传递
获取search传递的参数有两种方法

使用 searchParams.get('键名')

let [searchParams, setSearchParams] = useSearchParams() 
searchParams.get('键名') 
// setSearchParams({key1: val1, key2: val2}) 可以修改search参数

使用 useLocation().state

let location = useLocation()
console.log(location.state)

state参数(无需声明接收)

路由链接的 to 属性写成对象形式，添加state对象属性进行state参数传递

state = {
  messageArr:[
    {id:'01',title:'消息1'},
    {id:'02',title:'消息2'},
    {id:'03',title:'消息3'},
  ]
}
{msgObj.title}

获取state传递的参数使用 useLocation().state

let location = useLocation()
console.log(location.state)

路由跳转(编程式路由导航)(v5为useHistory)

let navigate = useNavigate()
navigate('路径', state:{state参数}, replace:true)

replace值true和false(push)区别：replace为true跳往的路由替代栈顶，当前路由所在的栈删除，false(push)为跳往的路由添加到栈顶(入栈)

BrowserRouter与HashRouter的区别

底层原理不一样
BrowserRouter 使用的是 H5 的 history API，不兼容 IE9 及以下版本
HashRouter 使用的是 URL 的哈希值
path表现形式不一样
BrowserRouter 的路径中没有#,例如：localhost:3000/demo/test
HashRouter 的路径包含#,例如：localhost:3000/#/demo/test
页面刷新后对路由state参数的影响
BrowserRouter没有任何影响，因为state保存在 history 对象中。
HashRouter刷新后会导致路由state参数的丢失