react-router-dom v^4路由配置

Posted 2020-12-31 nixu

首先安装路由

　　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=‘/‘ exact 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(<Index />, document.getElementById(‘root‘));
3 registerServiceWorker();

现在我们的基本路由就以及配置完成了，当然我们不能去URL地址栏中修改地址，

来说一下路由的跳转，目前我了解的有三种方式进行跳转

1、push方法

2、replace方法

3、Link方法

下面来详细的介绍一下他们的用法

一、push

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

二、replace

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

三、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)
}        

我们可以看见控制台以及可以打印出来参数

好的，现在我们的一个完整路由已经差不多完成了

有什么不足或者不对的地方欢迎大家指出