react-router-dom 6.0路由详解
<h3 id="react-react-router-dom-60路由使用">React react-router-dom 6.0路由使用</h3><h4 id="由于react路由版本的更新迭代记录路由知识点">由于react路由版本的更新迭代，记录路由知识点</h4>
<h4 id="新react-router-dom地址点击查看详情">新react-router-dom地址，点击查看详情。</h4>
<h4 id="下面为使用的例子">下面为使用的例子</h4>
<ol>
<li>Install</li>
</ol>
<pre><code> npm install react-router-dom@6 history@5
yarn add react-router-dom@6 history@5
</code></pre>
<ol start="2">
<li>配置路由地址</li>
</ol>
<pre><code>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>
)
}
</code></pre>
<h5 id="在使用导航时需要特别注意的时需要在父组件里面增加-outlet--才可以跳转成功">在使用导航时需要特别注意的时，需要在父组件里面增加 <code><Outlet /></code> ，才可以跳转成功。</h5>
<ol start="3">
<li>
<p>跳转页面的方式<br>
navigate(<code>/invoices/${number}</code>, { state: 1 })</p>
<p><NavLink to={<code>/invoices/${number}</code>}state={{a:1}}>1</p>
<p>在子组件中获取参数<br>
import { useLocation } from 'react-router-dom'</p>
<pre><code>let location = useLocation()
let data=location.state
</code></pre>
<p>地址栏参数获取<br>
import { useParams } from 'react-router-dom'</p>
<p>let params = useParams()<br>
let data=params.get('参数名')</p>
</li>
<li>
<p>在class components之前使用withRouter,但在新版中withRouter已移除，如果需要升级更新为 函数式组件或者封装hoc组件</p>
</li>
</ol>
<p>eg:</p>
<pre><code>import Reactfrom "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);
</code></pre>
<p>如有问题，不吝赐教，欢迎留言。</p><br><br>
来源：https://www.cnblogs.com/joexin/p/15532076.html
頁:
[1]