React Router是React中最流行的路由管理库之一，可以方便地进行路由控制和页面跳转。以下是使用React Router进行路由管理的步骤：
React Router还提供了一些高级功能，如状态保持。状态保持可以使得在路由跳转后，组件的状态得以保留。以下是使用React Router进行状态保持的步骤：
// 安装React Router
npm install react-router-dom
// 在App.js中引入Router和Route组件
import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
function App() {
return (
<Router>
<div>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
</ul>
<hr />
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
</div>
</Router>
);
}
// 在需要跳转的地方使用Link组件设置跳转链接
import React from 'react';
import { Link } from 'react-router-dom';
function Home() {
return (
<div>
<h2>Home</h2>
<ul>
<li><Link to="/topics">Topics</Link></li>
</ul>
</div>
);
}
// 使用React Router的withRouter高阶组件包裹需要进行状态保持的组件
import React from 'react';
import { withRouter } from 'react-router-dom';
class Example extends React.Component {
componentDidUpdate(prevProps) {
if (this.props.location !== prevProps.location) {
// 保存状态
}
}
componentWillUnmount() {
// 恢复状态
}
render() {
return (
<div>
...
</div>
);
}
}
export default withRouter(Example);