react-router-dom v6版本的详细配置与使用

react-router-dom更新到v6也有一段时间了，今天抽时间学习了一下，下面是我的一些总结，

1、安装

不用限制版本号，安装的就是v6版本

npm i react-router-dom --save

或者

yarn add react-router-dom --save

2、路由配置

创建router----> index.tsx文件

v6版本中使用Routes代替了 Switch 

路由匹配组件参数 由component改为 element

import { BrowserRouter, Route, Routes } from 'react-router-dom'
import { lazy, Suspense } from 'react'  //路由懒加载  //Suspense必须使用这个 不然页面跳转时会报错
const App = lazy(() => import('../App'))
const PageA = lazy(() => import('../views/PageA'))
const PageB = lazy(() => import('../views/PageB'))
const Router = () => {
    return (
        <BrowserRouter>
            <Suspense>
                <Routes>
                    <Route path='/' element={<App></App>}></Route>
                    <Route path='/pageA/:id?' element={<PageA></PageA>}></Route>
                    <Route path='/pageB' element={<PageB></PageB>}></Route>
                </Routes>
            </Suspense>
        </BrowserRouter>
    )
}

export default Router

这里使用了路由懒加载，有一个容易踩坑的地方，一定要在路由配置的外层加上 <Suspense>  不然会报这个错误

3、在main.tsx主文件中配置

import React from 'react'
import ReactDOM from 'react-dom/client'
// import App from './App.tsx'
import './index.css'
import Router from './router/index.tsx'
ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <Router />
  </React.StrictMode>
)

这里注销了App文件是因为已将app作为默认路由了，所以直接使用Roter

嵌套路由

v6版本的嵌套路由与老版本也有区别，下面是一个实例，

import { BrowserRouter, Route, Routes } from 'react-router-dom'
import { lazy, Suspense } from 'react'  //路由懒加载  //Suspense必须使用这个
const App = lazy(() => import('../App'))
const PageA = lazy(() => import('../views/PageA'))
const PageB = lazy(() => import('../views/PageB'))
const List = lazy(() => import('../views/List'))
const Detail = lazy(() => import('../views/Detail'))
const Router = () => {
    return (
        <BrowserRouter>
            <Suspense>
                <Routes>
                    <Route path='/' element={<App></App>}></Route>
                    <Route path='/pageA/:id?' element={<PageA></PageA>}></Route>
                    <Route path='/pageB' element={<PageB></PageB>}></Route>
                    <Route path='/list' element={<List></List>}>
                        {/* 嵌套路由 动态路由*/}
                        {/* 问号形式动态路由 */}
                        <Route path="detail/:id?" element={<Detail></Detail>}></Route>
                        {/* 斜杠形式动态路由 */}
                        <Route path='detail/:id' element={<Detail></Detail>}></Route>
                    </Route>
                </Routes>
            </Suspense>
        </BrowserRouter>
    )
}

export default Router

嵌套路由需要在路由父组件中添加一个路由占位符（outLet）相当于vue中（router-view）

import { Link, Outlet } from "react-router-dom"
function List() {
    return (
        <div>
            <Link to='/list/detail'>去详情</Link>
            {/* 路由占位符 */}
            <Outlet />
        </div>
    )
}

export default List

这样就可以实现嵌套路由了

路由跳转

使用 Link跳转时 和v5版本一样，这里主要介绍编程式导航跳转

v6中使用 useNavgaite代替原来的useHistory更加方便了

import {useNavigate} from react-router-dom'

const navigate=useNavigate()

斜杠形式传参
navigate('/user/id='+'test') 

问号形式传参
navigate('/user?id=test')

隐式方式传参  
这种形式路由中不会出现参数
navigate('/user',{state:{id:'test'})  

获取斜杠传参的路由参数

import {useParams} from 'react-router-dom'
const param=useParams()

console.log(param.id) --> test

获取问号形式传参的参数

import {useState} from 'react'
import {useSearchParams} from 'react-router-dom'
const [searchParam,setSearchParam]=useSearchParams()

consoloe.log(searchParam.get('id')) -->  test

可以通过  setSearchParam({id:'新的属性值'})  修改参数

获取隐式传值的路由参数

import {useLocation} from 'react-router-dom'
const location=useLocation()

consoloe.log(location)  --->其中包含的有state中的参数值

以上就是 react-router-dom  v6版本的基本用法，相比起老版本，用法更加简便了，还会持续更新，收藏和关注一下吧！！！