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

首先安裝路由

　　npm install --save react-router-dom

新建一個router.js文件

然后我們的router.js代碼如下↓

import React from 'react'
//這里的HashRouter是一個的路由的模式，它分為兩種BrowserRouter以及HashRouter兩種模式  使用的方法只是在導入時有區別，后面的代碼完全一致即可
import {HashRouter as Router, Route, Switch} from 'react-router-dom'  
import AppComponent from '../pages/App'
import NewsComponent from '../pages/news'
import DetailComponent from '../pages/details'
import {AuthRoute} from '../assets/common/function'

export default class RouteComponent extends React.Component {
    render() {
        return (
            <div>
                <React.Fragment>//用於清除多出的div  不太明白他的作用的可以在瀏覽器F12查看一下即可
                    <Router>
                        <React.Fragment>
                            <Switch>//只找到第一個被匹配的路由
                                <Route path='/' component={AppComponent}></Route>//exact 表示完全匹配
                                <Route path='/news' exact component={NewsComponent}></Route>
                                <AuthRoute path='/detail' component={DetailComponent}></AuthRoute>//AuthRoute是使用的會員登錄在以后的文章中會在詳細介紹，這里改成Route即可
                            </Switch>
                        </React.Fragment>
                    </Router>
                </React.Fragment>
            </div>
        );
    }
}

然后我們去index.js文件下改變一下顯示的組件

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

現在我們的基本路由就以及配置完成了，當然我們不能去URL地址欄中修改地址，

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

1、push方法

2、replace方法

3、Link方法

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

一、push

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

二、replace

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

三、Link

這個方法先需要我們在引入一下

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

現在我們的一級路由就差不多配置完成了，接下來那我們擴展一下二級路由的使用以及帶參路由

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

讓我們看一下代碼

render() {
        return (
            <div className={'App'}>
                <div className={'nav'}>
                    <dl onClick={this.goPage.bind(this,'/home')}>
                        <dt><i className={'iconfont icon-home'}></i></dt>
                        <dd>首頁</dd>
                    </dl>
                    <dl onClick={this.goPage.bind(this,'/fenlei')}>
                        <dt><i className={'iconfont icon-fenlei'}></i></dt>
                        <dd>分類</dd>
                    </dl>
                </div>
                <Switch>
                    <Route path={'/home'} component={Home}></Route>
                    <Route path={'/fenlei'} component={Fenlei}></Route>
                </Switch>
            </div>
        );
    }

goPage(path){
        this.props.history.replace(path)
    }

注：如果我們的路由是在另一個組件內引入進來的，我們需要如下操作

import { withRouter } from 'react-router';
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)
}        

我們可以看見控制台以及可以打印出來參數