React中使用路由
安装
安装Route组件：
npm i react-router-domRoute组件介绍
BrowserRouter：所有需要路由的组件，都要包裹在BrowserRouter组件内Link：跳转到某个链接，to属性表示跳转到的链接Routes：类似于C++中的switch，匹配第一个路径Route：路由，path属性表示路径，element属性表示路由到的内容useParams和useSearchParams获取路径参数Navigate：和Route组件组合使用来实现重定向
使用
BrowserRouter
引入
import { BrowserRouter } from 'react-router-dom';使用BrowserRouter
在root.render()中用<BrowserRouter></BrowserRouter>将App组件（或者自己定义的其他有使用路由的组件）括起来。
例如
<BrowserRouter>
<App />
</BrowserRouter>Link
引入
import { Link } from 'react-router-dom';使用
将页面内部跳转所用到的<a href="..."></a> 改为 <Link to="..."></Link>，其他保持不变
Routes和Route
引入
import {Routes, Route} from 'react-router-dom';使用
先写一个<Routes></Routes>标签，然后在里面写<Route />标签
其中<Route /> 标签中有两个参数一个是path另外一个是element，path中放匹配的路径，element中放要渲染的标签
例如
<Routes>
<Route path='/' element={<Home />}/>
<Route path='like' element={<Like />}/>
<Route path='about' element={<About />}/>
<Route path='issues' element={<Issues />}/>
</Routes>element中不仅可以放组件的标签，正常的html标签也可以放
例如：
<Routes>
<Route path='/' element={<h1>Hello world</h1>}/>
</Routes>嵌套路由
<Route path="/web" element={<Web />}>
<Route index path="a" element={<h1>a</h1>} />
<Route index path="b" element={<h1>b</h1>} />
<Route index path="c" element={<h1>c</h1>} />
</Route>注意：需要在父组件中添加<Outlet />组件，用来填充子组件的内容。（即<Outlet />会根据路由的不同动态的渲染不同的子标签，假如当前的路由为/web/a 则<Outlet />等效于<h1>a</h1>）
useParams 和 useSearchParams
URL中传递参数
解析URL：
<Route path="/linux/:chapter_id/:section_id/" element={<Linux />} />获取参数，类组件写法：
import React, { Component } from 'react';
import { useParams } from 'react-router-dom';
class Linux extends Component {
state = { }
render() {
console.log(this.props.params);
return <h1>Linux</h1>;
}
}
export default (props) => (
<Linux
{...props}
params={useParams()}
/>
)函数组件写法：
import React, { Component } from 'react';
import { useParams } from 'react-router-dom';
const Linux = () => {
console.log(useParams());
return (<h1>Linux</h1>);
}
export default Linux;Search Params传递参数
类组件写法：
import React, { Component } from 'react';
import { useSearchParams } from 'react-router-dom';
class Django extends Component {
state = {
searchParams: this.props.params[0], // 获取某个参数
setSearchParams: this.props.params[1], // 设置链接中的参数，然后重新渲染当前页面
}
handleClick = () => {
this.state.setSearchParams({
name: "abc",
age: 20,
})
}
render() {
console.log(this.state.searchParams.get('age'));
return <h1 onClick={this.handleClick}>Django</h1>;
}
}
export default (props) => (
<Django
{...props}
params={useSearchParams()}
/>
);函数组件写法：
import React, { Component } from 'react';
import { useSearchParams } from 'react-router-dom';
const Django = () => {
let [searchParams, setSearchParams] = useSearchParams();
console.log(searchParams.get('age'));
return (<h1>Django</h1>);
}
export default Django;Navigate
引入
import {Routes, Route, Navigate} from 'react-router-dom';使用
<Route path="*" element={ <Navigate replace to="/404" /> } />