1. 官网，安装
组件定位：在React V6中将与@reach/router 合并，成为下代的react的路由标准。
https://reactrouter.com/web/guides/quick-start
https://reactrouter.com/web/guides/quick-start
2. 基本示例：
(1) App.js
import React from "react";
import './App.css'
import {
Switch,
Route,
NavLink
} from "react-router-dom";
export default function App() {
return (
// 整个组件必须放置在Router中，见index.js
<div>
{/* 相比Link,NavLink会在匹配时，添加一个.active的class */}
<NavLink to="/">Home</NavLink>|
<NavLink to="/users">Users</NavLink>|<NavLink to="/about">About</NavLink>
<hr />
{/* Switch起到“占位符”的作用，在path匹配的情况下，将期中的组件进行显示 */}
<Switch>
<Route path="/about" component={About}/>
<Route path="/users">
<Users />
</Route>
<Route path="/">
<h1>Home</h1>
</Route>
</Switch>
</div>
);
}
function About() {
return <h2>About</h2>;
}
function Users() {
return <h2>Users</h2>;
}
(2) index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {
BrowserRouter as Router
} from "react-router-dom";
ReactDOM.render(
<React.StrictMode>
<Router>
<App />
</Router>
</React.StrictMode>,
document.getElementById('root')
);
reportWebVitals();
