在本文中, 我们来看看如何在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 (
<browserrouter>
<navlink> Page 1/<navlink>
<navlink>Page 2 /<navlink>
<navlink>Page 3 /<navlink>
<route>
<route>
<route>
);
}
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;
}
到这里,我们的代码部分就完成了,保存重启工程,你应该可以看到文章开头的效果了。
如果你有什么问题可以给我留言或者发信。
閱讀更多 丁哥開講 的文章