react-router-dom v^4路由、帶參路由的配置

首先安裝路由

　　npm install --save react-router-dom

新建一個router.js文件

而後咱們的router.js代碼以下↓

 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 }

而後咱們去index.js文件下改變一下顯示的組件

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

如今咱們的基本路由就以及配置完成了，固然咱們不能去URL地址欄中修改地址，

來講一下路由的跳轉，目前我瞭解的有三種方式進行跳轉

一、push方法

二、replace方法

三、Link方法

下面來詳細的介紹一下他們的用法

1、push

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

2、replace

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

3、Link

這個方法先須要咱們在引入一下

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

如今咱們的一級路由就差很少配置完成了，接下來那咱們擴展一下二級路由的使用以及帶參路由

根據我我的的理解其實二級路由就是在你的一個路由頁面在重複的寫一遍router.js裏面的內容

讓咱們看一下代碼

 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"

這裏咱們使用componentWillReactiveProps生命週期接受

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

咱們能夠看見控制檯以及能夠打印出來參數

好的，如今咱們的一個完整路由已經差很少完成了

有什麼不足或者不對的地方歡迎你們指出