react-router-dom6.0路由详解
React react-router-dom 6.0路由使⽤
由于react路由版本的更新迭代，记录路由知识点
新地址，点击查看详情。
下⾯为使⽤的例⼦
1. Install
npm install react-router-dom@6 history@5
yarn add react-router-dom@6 history@5
2. 配置路由地址
import React from 'react';
import { BrowserRouter as Router, Routes, Route  } from "react-router-dom";
function Routelist(){
return(
<Router>
<Routes>
<Route path='/' element={<App />}></Route>
<Route path="invoices" element={<Invoices />}>
<Route
index
element={
<main style={{ padding: "1rem" }}>
<p>Select an invoice</p>
</main>
}
/>
<Route path=":invoiceId" element={<Invoice />} />
</Route>
{/* 不匹配 */}
<Route
path="*"
element={
<main style={{ padding: "1rem" }}>
<p>There's nothing here!</p>
</main>
}
/>
</Routes>
</Router>
)
}
在使⽤导航时需要特别注意的时，需要在⽗组件⾥⾯增加<Outlet />，才可以跳转成功。
3. 跳转页⾯的⽅式
navigate(/invoices/${number}, { state: 1 })
<NavLink to={/invoices/${number}} state={{a:1}}>1
在⼦组件中获取参数
import { useLocation } from 'react-router-dom'
let location = useLocation()
let data=location.state
地址栏参数获取
import { useParams } from 'react-router-dom'
let params = useParams()
let ('参数名')react router v5
4. 在class components之前使⽤withRouter，但在新版中withRouter已移除，如果需要升级更新为函数式组件或者封装hoc组件eg:
import React  from "react";
import { useParams, useLocation, useNavigate } from "react-router-dom"; function withRouter(Component) {
return (props) => (
<Component
{...props}
params={useParams()}
location={useLocation()}
navigate={useNavigate()}
/>
);
}
class Invoice extends React.Component {
render() {
return (
<div
onClick={() => this.props.navigate(`/invoices/1998`, { state: "1998" })}      >
22
</div>
);
}
}
export default withRouter(Invoice);
如有问题，不吝赐教，欢迎留⾔。