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

大大的周 02-07 8043

文章目录前言一、引入库文件二、使用步骤 1.首页引入Router2.创建路由集中管理文件3.在App中使用useRoutes4.在子页面中使用5.路由传值的方式总结

前言

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参数

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.