react路由 -简单实现

api :https://reactrouter.com/web/api

项目结构：

 Details 和 List的路由及页面内容有接受参数的方式,在文章最后都有展示

1.安装依赖 

     npm install --save react-router-dom

2.Link跳转

    Nav/index.jsx

   导航高亮的处理点击菜单显示高亮： activeStyle={{ color:'red' }} activeClassName="active"

import React from 'react'
import { NavLink } from "react-router-dom"
import "./style.css"

export default class Nav extends React.Component{
    render(){
        return(
            <div className="nav">
                <ul>
                     <li>
                         <NavLink exact activeStyle={{fontWeight:"bold",color:"red"}} to='/'>首页</NavLink>
                    </li>
                    <li>
                        <NavLink exact activeStyle={{fontWeight:"bold",color:"red"}} activeClassName="active" to='/news'>新闻</NavLink>
                    </li>
                    <li>
                        <NavLink exact activeStyle={{fontWeight:"bold",color:"red"}} activeClassName="active" to='/news/sports'>体育</NavLink>
                    </li>
                    <li>
                        <NavLink exact activeStyle={{fontWeight:"bold",color:"red"}} activeClassName="active" to='/list/10001'>列表</NavLink>
                    </li>
                    <li>
                        <NavLink exact activeStyle={{fontWeight:"bold",color:"red"}} activeClassName="active" to='/details?name=123'>明细</NavLink>
                    </li>
                </ul>
            </div>
        )
    }
}

style.css

.nav ul{
    overflow: hidden;
    clear: both;
}
.nav ul li{
    float: left;
    margin: 0 20px;
}
.active{
    color:red;
}

3.配置views视图页面页面 每个页面引入Link

import React from 'react'
import Nav from '../Nav'
import qs from "querystring"

export default class Details extends React.Component{
    render(){
        return(
            <div>
                <Nav/>
                {qs.parse(this.props.location.search)['?name']}
                
                </div>
        )
    }
}

import React from 'react'
import Nav from '../Nav'

export default class Home extends React.Component{
    render(){
        return(
            <div>
                <Nav/>
                Home
            </div>
        )
    }

}

import React from 'react'
import Nav from '../Nav'

export default class List extends React.Component{
    render(){
        return(
            <div>
                <Nav/>
                List
            </div>
        )
    }

}

import React from 'react'
import Nav from '../Nav'

export default class News extends React.Component{
    render(){
        return(
            <div>
                <Nav/>
                News</div>
        )
    }
}

import React from 'react'
import Nav from '../Nav'

export default class Sports extends React.Component{
    render(){
        return(
            <div>
                <Nav/>
                Sports</div>
        )
    }
}

4.App.js配置路由文件

   精准匹配:exact strict

import React from 'react';
import { HashRouter as Router,Route,Switch} from 'react-router-dom'
import List from './views/List'
import Home from './views/Home'
import News from './views/News'
import Sports from './views/Sports'
import Details from './views/Details'

class App extends React.Component {

  render(){
    return (
      <Router>
      <Switch>
      <Route exact path='/' component={ Home }></Route>
          <Route exact strict path='/news' component={ News }></Route>
          <Route  path='/news/sports' component={ Sports }></Route>
          <Route  path='/list/:id' component={ List }></Route>
          <Route  path='/details' component={ Details }></Route>

          <Route render={ ()=><div>404 页面飞走了</div> }></Route>
          {/* <Route component={NotFound}></Route> */}
      </Switch>
    </Router>
    );
  }
}

export default App;

5.页面展示