1、安装依赖
npm install react-router-dom
或者
yarn add react-router-dom
2、基本用法
import React from 'react';
import ReactDOM from 'react-dom/client';
// 因为想要演示history,引用的是“unstable_HistoryRouter”
// 不想使用history的情况下,可以引用 “BrowserRouter”,Link、Navigate等组件完全够用
import { unstable_HistoryRouter as Router, Route, Link, Routes, useNavigate } from 'react-router-dom';
import { createBrowserHistory } from "history";
const history = createBrowserHistory({ window });
class Login extends React.Component {
handlerLogin = () => {
// 编程式导航, history方式调整到个人中心页,
history.push('/person')
}
render() {
return (
<div>
<p>登录页面</p>
<button onClick={this.handlerLogin}>登录</button>
</div>
)
}
}
const PersonCenter = (props) => {
const handlerBackLogin = () => {
// go(-1) 表示返回上一个
history.go(-1)
}
let navigate = useNavigate();
const handlerGoHomepage = () => {
// 编程式导航
navigate("/", {replace: true});
}
return (
<div>
<h3>个人中心</h3>
<button onClick={handlerBackLogin}>返回登录</button>
<button onClick={handlerGoHomepage}>去首页</button>
</div>
)
}
const Dashboard = () => (
<div>
<h3>首页</h3>
<Link to="/login">去登录页面</Link>
</div>
)
const App = () => {
return (
<Router history={history}>
<Routes>
<Route path='/' Component={Dashboard}/>
<Route path='/login' Component={Login}/>
{/* /exact 精确匹配 */}
<Route exact path='/person' Component={PersonCenter}/>
</Routes>
</Router>
)
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<>
<React.StrictMode>
<App />
</React.StrictMode>
</>
);
——————————————————
燕草如碧丝,秦桑低绿枝。
当君怀归日,是妾断肠时。
春风不相识,何事入罗帏。
- 春思 [作者] 李白 [朝代] 唐