React-Router简单实例

 下面这段代码是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;

本内容由安康学院“雨季”原创！