react-router-dom v^4路由、带参路由的配置

 1 import React from 'react'
 2 //这里的HashRouter是一个的路由的模式，它分为两种BrowserRouter以及HashRouter两种模式  使用的方法只是在导入时有区别，后面的代码完全一致即可
 3 import {HashRouter as Router, Route, Switch} from 'react-router-dom'  
 4 import AppComponent from '../pages/App'
 5 import NewsComponent from '../pages/news'
 6 import DetailComponent from '../pages/details'
 7 import {AuthRoute} from '../assets/common/function'
 8 
 9 export default class RouteComponent extends React.Component {
10     render() {
11         return (
12             <div>
13                 <React.Fragment>//用于清除多出的div  不太明白他的作用的可以在浏览器F12查看一下即可
14                     <Router>
15                         <React.Fragment>
16                             <Switch>//只找到第一个被匹配的路由
17                                 <Route path='/' component={AppComponent}></Route>//exact 表示完全匹配
18                                 <Route path='/news' exact component={NewsComponent}></Route>
19                                 <AuthRoute path='/detail' component={DetailComponent}></AuthRoute>//AuthRoute是使用的会员登录在以后的文章中会在详细介绍，这里改成Route即可
20                             </Switch>
21                         </React.Fragment>
22                     </Router>
23                 </React.Fragment>
24             </div>
25         );
26     }
27 }

1 import RouteComponent from './router/router';
2 ReactDOM.render(<RouteComponent />, document.getElementById('root'));
3 registerServiceWorker();

1 <button type="button" onClick={this.pushPage.bind(this,'/news')}>push</button>
2 pushPage(path){
3   this.props.history.push(path) 
4 }

1 <button type="button" onClick={this.replactPage.bind(this,'/news')}>replact</button>
2   replactPage(path){
3     this.props.history.replact(path) 
4  }

1 import {Link} from “react-router-dom”
2 <Link to='/news'>Link</Link>

 1 render() {
 2         return (
 3             <div className={'App'}>
 4                 <div className={'nav'}>
 5                     <dl onClick={this.goPage.bind(this,'/home')}>
 6                         <dt><i className={'iconfont icon-home'}></i></dt>
 7                         <dd>首页</dd>
 8                     </dl>
 9                     <dl onClick={this.goPage.bind(this,'/fenlei')}>
10                         <dt><i className={'iconfont icon-fenlei'}></i></dt>
11                         <dd>分类</dd>
12                     </dl>
13                 </div>
14                 <Switch>
15                     <Route path={'/home'} component={Home}></Route>
16                     <Route path={'/fenlei'} component={Fenlei}></Route>
17                 </Switch>
18             </div>
19         );
20     }

1 goPage(path){
2         this.props.history.replace(path)
3     }

1 import { withRouter } from 'react-router';
2 export default withRouter(App);

<button onClick={this.goPage.bind(this,'/news?cid=你需要传递的参数&name=...')}>带参路由</button>

function localParam (search, hash) {
    search = search || window.location.search;
    hash = hash || window.location.hash;
    var fn = function(str, reg) {
        if (str) {
            var data = {};
            str.replace(reg, function($0, $1, $2, $3) {
                data[$1] = $3;
            });
            return data;
        }
    }
    return {
        search : fn(search, new RegExp("([^?=&]+)(=([^&]*))?", "g")) || {},
        hash : fn(hash, new RegExp("([^#=&]+)(=([^&]*))?", "g")) || {}
    };
}

export {
    localParam
}

import {localParam} from "../assets/js/function"

componentWillReceiveProps (nextprops){
        var get = localParam(nextprops.location.search).search
        var cid = get.cid
        console.log(cid)
}