版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_25337221/article/details/82733749
下面这段代码是React=Router4的写法。
import React,{Component} from 'react';
import {BrowserRouter,Route,NavLink} from 'react-router-dom';
import Home from './Home';
import Second from './Second';
import Third from './Third';
import Fourth from './Fourth'
import Fifth from './Fifth'
import Sixth from './Sixth'
import '../css/nav.css'
class Nav extends Component{
constructor(){
super();
console.log('这是导航');
}
render(){
return <div>
<BrowserRouter basename="/">
<div>
<div>
<ul className="nav">
<li className="nav-item"><NavLink exact activeClassName="selected" to="/">home</NavLink></li>
<li className="nav-item"><NavLink activeClassName="selected" to="/second/1234">second</NavLink></li>
<li className="nav-item"><NavLink activeClassName="selected" to="/third">third</NavLink></li>
<li className="nav-item"><NavLink activeClassName="selected" to="/fourth">Fourth</NavLink></li>
<li className="nav-item"><NavLink activeClassName="selected" to="/fifth">fifth</NavLink></li>
<li className="nav-item"><NavLink activeClassName="selected" to="/sixth">sixth</NavLink></li>
</ul>
</div>
<Route exact path="/" component={Home}></Route>
<Route path="/second/:id" component={Second}></Route>
<Route path="/third" component={Third}></Route>
<Route path="/fourth" component={Fourth}></Route>
<Route path="/fifth" component={Fifth}></Route>
<Route path="/sixth" component={Sixth}></Route>
</div>
</BrowserRouter>
</div>
}
}
export default Nav;
本内容由安康学院“雨季”原创!