在本文中， 我們來看看如何在React中設置路徑路由。我們期望在結尾時取得如下的成績：

在本次演示中，我們創建了三個頁面： Page 1， Page 2， Page 3。

為了簡化處理，三個頁面的定義類似如下：

import React from 'react';

function Page1() {

return (

);

}

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 (

);

}

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;

}

到這裡，我們的代碼部分就完成了，保存重啟工程，你應該可以看到文章開頭的效果了。

如果你有什麼問題可以給我留言或者發信。

閱讀更多 丁哥開講 的文章

關鍵字: 路由 路由器 Lia