react简单的路由demo(react-router-dom4.3.1)
程序员文章站
2022-07-03 15:24:10
...
效果图:
import React from 'react'
import ReactDom from 'react-dom'
import {BrowserRouter as Router,Route,NavLink,Switch} from 'react-router-dom'
import RouterDemoOne from './RouterDemoOne'
import RouterDemoTwo from './RouterDemoTwo'
import RouterDemoThree from './RouterDemoThree'
import './style.css'
const App = () => (
<Router>
<div>
<h2>路由Demo</h2>
<header>
<nav>
<ul className="header">
<li><NavLink exact to="/">首页</NavLink></li>
<li><NavLink to="/two">说说</NavLink></li>
<li><NavLink to='/three'>日志</NavLink></li>
</ul>
</nav>
</header>
<Switch>
<Route exact path="/" component={RouterDemoOne}/>
<Route path="/news" component={RouterDemoTwo}/>
<Route path="/course" component={RouterDemoThree}/>
</Switch>
</div>
</Router>
)
ReactDom.render(
<App />,
document.getElementById('root')
)
style.css
.header{
list-style:none;
height: 40px;
line-height: 40px;
background: #000;
color: #fff
}
.header li{
background: #000;
float: left;
width: 100px;
text-align: center
}
.header li a{
color:#fff;
text-decoration: none
}
.active{
background-color: dodgerblue;
display: block;
height: 40px;
line-height: 40px;
}
上一篇: 题983、最低票价
下一篇: CentOS 7 CA证书服务器搭建