react 动态修改路由_React中的路由设置

在本文中， 我们来看看如何在React中设置路径路由。我们期望在结尾时取得如下的成绩：

在本次演示中，我们创建了三个页面： Page 1， Page 2， Page 3。

为了简化处理，三个页面的定义类似如下：

import React from 'react';

function Page1() {

return (

 Page 1 works

);

}

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 (

•  Page 1

• Page 2 

• Page 3 

);

}

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;

}

到这里，我们的代码部分就完成了，保存重启工程，你应该可以看到文章开头的效果了。

如果你有什么问题可以给我留言或者发信。