react-router-dom V6 路由传值及功能介绍

---

前言

React-router-dom已经升级到最新版本V6,先简单介绍一下v6版本发生了哪些改变

---

一、引入库文件

引入最新的reac-router-dom

yarn

$ yarn add react-router-dom@6

npm

$ npm install react-router-dom@6

二、使用步骤

1.首页引入Router

我这里引入的是HashRouter，还有一种BrowserRouter

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { HashRouter } from 'react-router-dom';

ReactDOM.render(
  <React.StrictMode>
    <HashRouter>
      <App />
    </HashRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

2.创建路由集中管理文件

index设置为true时，相当于一个默认的子路由
在v5中使用的是component，但是在v6中改成element

代码如下（示例）：

import type { RouteObject } from 'react-router-dom'
import BaseLayout from '../layout/BaseLayout'
import About from '../pages/About'
import Home from '../pages/Home'
import AboutIndex from '../pages/About/Component/AboutIndex'
import AboutList from '../pages/About/Component/AboutList'
import Bussiness from '../pages/Bussiness'


const routes : RouteObject[] = [
    {
        path: "/",
        element: <BaseLayout/>, 
        children: [
            {
                index : true,
                element: <Home />
            },
            {
                path: "/about",
                element: <About />,
                children: [
                    { index : true, element: <AboutIndex />},
                    { path : "/about/:id", element :<AboutList />}
                ]
            },
            {
                path: "/bussiness",
                element: <Bussiness />,
            }
        ]
    },
    {
        path: "/sso",
        element: <div>1</div>
    }
]

export default routes

3.在App中使用useRoutes

import React from 'react';
import './App.css';
import { useRoutes } from 'react-router';
import routes from './route';

function App() {
  return (
    <div className="App">
      {useRoutes(routes)}
    </div>
  );
}

export default App;

4.在子页面中使用

<Outlet/ >相当于V5中的this.props.children,用于渲染子路由时显示嵌套 UI，如果父路由完全匹配，它将渲染子索引路由，如果没有索引路由，则不渲染。

import { Outlet ,useNavigate } from 'react-router';

const BaseLayout = () => {
   const navigate = useNavigate()
   const onMenuChange = (item : any) => {
       switch (item.key) {
           case "业务" : 
           navigate('/about')
           break
           case "关于" : 
           navigate('/bussiness')
           break
           default :
           navigate('/')
       }
   }

   return (
       <Layout>
           <Header style={{background:'#fff', position : 'fixed',zIndex:1,width:'100%',border:0}}>
               <Menu mode="horizontal" onClick={onMenuChange}>
                   <Menu.Item key="首页">首页</Menu.Item>
                   <Menu.Item key="业务">业务</Menu.Item>
                   <Menu.Item key="关于">关于</Menu.Item>
               </Menu>
           </Header>
           <Content style={{flex : '1',background:'#fff', padding: '0 50px', marginTop: 64 }}>
               <Outlet/>
           </Content>
           <Footer style={{ textAlign: 'center' }}>React Router Demo @2022</Footer>
       </Layout>
   )
}

export default BaseLayout

同时在V6中用useNavigate代替V5中的useHistory

// v5
history.push('/home');
history.replace('/home');
 
// v6
navigate('/home');
navigate('/home', {replace: true});

5.路由传值的方式

params参数

// 注册路由
<Route path="/about/:id" element={<AboutList />} />

// 通过navigate路由跳转
import { useNavigate } from "react-router-dom";

let navigate = useNavigate();
navigate('/about/6')

// 或者通过Link跳转
<Link to={{ pathname:`/about/6` }}>Child</Link>

// 通过useParams接受路由传值
import { useParams } from "react-router-dom";

const params = useParams();
console.log(params.id) // 6

search参数

// 注册路由
<Route path="/about/:id" element={<AboutList />} />

// 通过navigate路由跳转
import { useNavigate } from "react-router-dom";

let navigate = useNavigate();
navigate('/about/2?id=999')

// 或者通过Link跳转
<Link to={{ pathname:`/about/2?id=999` }}>Child</Link>

// 通过useParams接受路由传值
import { useSearchParams } from "react-router-dom";

const [searchParams, setSearchParams] = useSearchParams();

// 获取参数
searchParams.get('id')

// 判断参数是否存在
searchParams.has('id')

// 同时页面内也可以用set方法来改变路由
setSearchParams({"id":2})

console.log(searchParams.get('id')) // 999

state参数

// 通过navigate路由跳转
let navigate = useNavigate();
navigate('/about',{replace : true,state : { id : '666' }})

const location = useLocation()
console.log(location) 

/* 打印出来是如下结构
{
    "pathname": "/about",
    "search": "",
    "hash": "",
    "state": {
        "id": "666"
    },
    "key": "22tzhk2h"
} 
*/

在以前版本中，组件的props会包含一个match对象，在其中可以取到路径参数。但在最新的6.x版本中，无法从props获取参数。

并且，针对类组件的withRouter高阶组件已被移除。因此对于类组件来说，使用参数有两种兼容方法：

1.将类组件改写为函数组件
2.自己写一个HOC来包裹类组件，用useParams获取参数后通过props传入原本的类组件

---

总结

以上就是今天要讲的内容，下面是本文所用代码
链接: demo.