1. 官網(wǎng)糖驴，安裝
組件定位：在React V6中將與@reach/router 合并，成為下代的react的路由標(biāo)準(zhǔn)钻蹬。
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 (
// 整個(gè)組件必須放置在Router中，見(jiàn)index.js
<div>
{/* 相比Link,NavLink會(huì)在匹配時(shí)凭需，添加一個(gè).active的class */}
<NavLink to="/">Home</NavLink>|
<NavLink to="/users">Users</NavLink>|<NavLink to="/about">About</NavLink>
<hr />
{/* Switch起到“占位符”的作用问欠，在path匹配的情況下，將期中的組件進(jìn)行顯示 */}
<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();
