在本文中， 我們來看看如何在React中設定路徑路由。我們期望在結尾時取得如下的成績：
在本次演示中，我們建立了三個頁面： Page 1， Page 2， Page 3。
為了簡化處理，三個頁面的定義類似如下：
import React from 'react';
function Page1() {
return (
<div>
<h1> Page 1 works</h1>
</div>
);
}
export default Page1;
在工程中我們需要新增如下的依賴庫react-router-dom。新增以後，在package.json中會增加一行：
“react-router-dom”: “5.1.2”,
下面是路徑的應用，我們需要修改父級元件，這裡的例子使用App.js作為父級元件：
import React from 'react';
import './App.css';
import Page1 from './components/Page1';
import Page2 from './components/Page2';
import Page3 from './components/Page3';
import { NavLink, Route, BrowserRouter } from 'react-router-dom';
function App() {
return (
<div className="App">
<BrowserRouter>
<div>
<ul>
<li>
<NavLink activeClassName='active' to="/page1"> Page 1</NavLink>
</li>
<li>
<NavLink activeClassName='active' to="/page2">Page 2 </NavLink>
</li>
<li>
<NavLink activeClassName='active' to="/page3">Page 3 </NavLink>
</li>
</ul>
<Route path="/page1" exact component={Page1}></Route>
<Route path="/page2" exact component={Page2}></Route>
<Route path="/page3" exact component={Page3}></Route>
</div>
</BrowserRouter>
</div>
);
}
export default App;
接下來是新增樣式，不然的話，顯示的介面不好看。示例如下：
ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li{
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active{
background-color: #4CAF50;
}
到這裡，我們的程式碼部分就完成了，儲存重啟工程，你應該可以看到文章開頭的效果了。