1）安裝react-router到項目中
npm install react-router-dom -S
2）配置路由實現頁面切換
import React, { Component } from 'react';
import { BrowserRouter,Route,Link} from 'react-router-dom';
import Home from './view/Home';
import Login from './view/Login';
import Logout from './view/Logout';
import './index.css';
class App extends Component {
render() {
return (
// 路由配置必須放在BrowserRouter之內
<BrowserRouter>
<header>React Router v4 Browser Example</header>
{/* 設置導航 */}
<div>
<ul>
<li><Link to="/">首頁</Link></li>
<li><Link to="/login">Login</Link></li>
<li><Link to="/logout">Logout</Link></li>
</ul>
</div>
{/* 設置路由，實現頁面切換 */}
<div>
<Route path="/" exact component={Home}></Route>
<Route path="/login" component={Login}></Route>
<Route path="/logout" component={Logout}></Route>
</div>
</BrowserRouter>
);
}
}
export default App;
<BrowserRouter> 使用 HTML5 提供的 history API (pushState, replaceState 和 popstate事件) 來保持 UI 和 URL 的同步。
<HashRouter> 使用 URL 的 hash 部分（即 window.location.hash）來保持 UI 和 URL 的同步。
<Link>為應用提供聲明式的、可訪問的導航鏈接。
<NavLink>一個特殊版本的 <Link>，它會在與當前 URL 匹配時為其呈現元素添加樣式屬性。
<Prompt>用於在位置跳轉之前給予用戶一些確認信息。當你的應用程序進入一個應該阻止用戶導航的狀態時（比如表單只填寫了一半），彈出一個提示。
<MemoryRouter>將 URL 的歷史記錄保存在內存中的 <Router>（不讀取或寫入地址欄）。在測試和非瀏覽器環境中很有用，例如 React Native。
<Redirect>使用 <Redirect> 會導航到一個新的位置。新的位置將覆蓋歷史堆棧中的當前條目，例如服務器端重定向（HTTP 3xx）。
<Route> 可能是 React Router 中最重要的組件，它可以幫助你理解和學習如何更好的使用 React Router。它最基本的職責是在其 path 屬性與某個 location 匹配時呈現一些 UI。