【React系列教程八】React路由react-router的配置、路由传值、js跳转路由、路由模块化

一、react路由的配置：

1、找到官方文档 https://reacttraining.com/react-router/web/example/basic

2、安装 【cnpm install react-router-dom --save】

3、找到项目的根组件引入react-router-dom

import { BrowserRouter as Router, Route, Link } from "react-router-dom";

4、复制官网文档根组件里面的内容进行修改（加载的组件要提前引入）。大致结构如下：

<Router>
    <div>
        <Route exact path="/" component={ComA} />
        <Route path="/b" component={ComB} />
    </div>
</Router>

二、路由传值（也可以理解为页面传值）

方法1：react动态路由传值：

1、动态路由配置：<Route path="/c/:cid" component={ComC} />

跳转：<Link to="/c/12">ComC</Link>

2、对应跳转的组件里面获取值：this.props.match.params.cid 。请参考下面代码ComC.js文件。

扫描二维码关注公众号，回复： 6023287 查看本文章

方法2：react get传值：

1、跳转：<Link to="/d?did=34">ComD</Link>

2、获取值： this.props.location.search

说明：此时获取的值是字符串格式："?did=34"，需要用url模块来解析一下，也可以自己定义方法解析。

url模块使用步骤：step1：安装【cnpm install url --save】。

step2：引入： import url from 'url';

step3：使用：url.parse(this.props.location.search, true).query 获取传参对象。请参考下面代码ComD.js文件。

三、实现js跳转路由

step1：要引入Redirect：import { Redirect } from "react-router-dom";

step2：在state中，定义一个flag为false。

step3：render里面判断flag，来决定是否跳转：

if (this.state.flag) {
return <Redirect to={{ pathname: '/' }} />
}

step4：在点击跳转事件中改变flag为true，之后重新render即可实现跳转。请参考下面代码ComB.js文件。

以下面代码为例，详细理解新建路由、路由传值以及js跳转路由：

RouterABC.js组件：

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import ComA from './ComA'
import ComB from './ComB'
import ComC from './ComC'
import ComD from './ComD'

class RouterABC extends Component {
    constructor(props) {
        super(props);
        this.state = {  };
    }
    render() {
        return (
            <Router>
               <ul>
                <li>
                  <Link to="/">ComA</Link>
                </li>
                <li>
                  <Link to="/b">ComB</Link>
                </li>
                {/* 下面是两个传值的 */}
                {/* 1、动态路由传值 */}
                <li>
                  <Link to="/c/12">ComC</Link>
                </li>
                {/* 2、get传值 */}
                <li>
                  <Link to="/d?did=34">ComD</Link>
                </li>
              </ul> 
              <hr />
      
              <Route exact path="/" component={ComA} />
              <Route path="/b" component={ComB} />
              <Route path="/c/:cid" component={ComC} />
              <Route path="/d" component={ComD} />
          </Router>
        );
    }
}

export default RouterABC;

说明：上面的exact表示严格匹配，不添加这个的话，那么"localhost:3000/b"会同时显示ComA和ComB组件的内容。

ComB.js组件：

import React, { Component } from 'react';
import { Redirect } from "react-router-dom";
class ComB extends Component {
    constructor(props) {
        super(props);
        this.state = {
            flag: false
        };
    }
    jump = () => {
        this.setState({
            flag: true
        })
    }
    render() {
        if (this.state.flag) {
            return <Redirect to={{ pathname: '/' }} />
            // 或者下面的写法：
            // return <Redirect to='/' />
        }
        return (
            <div>ComB页面
                <br></br>
                <button onClick={this.jump}>点击跳转到ComA页面</button>
            </div>
        );
    }
}
export default ComB;

ComC.js组件：

import React, { Component } from 'react';
class ComC extends Component {
    constructor(props) {
        super(props);
        this.state = {  };
        console.log(this.props.match.params.cid);
    }
    render() {
        return (
            <div>ComC页面---接收传过来的值为：{this.props.match.params.cid}</div>
        );
    }
}

export default ComC;

ComD.js组件：

import React, { Component } from 'react';
import url from 'url';//通过url模块来解析url地址

class ComD extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }
    componentDidMount() {
        console.log(this.props.location.search);//打印“?did=34”
        console.log(url.parse(this.props.location.search, true));
        var did = url.parse(this.props.location.search, true).query.did;
        console.log(did);//打印“34”
    }
    render() {
        return (
            <div>ComD页面---接收传过来的值为：{url.parse(this.props.location.search, true).query.did}</div>
        );
    }
}

export default ComD;

出来的动态效果界面如下：

四、路由模块化：

把路由放在一个文件中，方便管理。

新增的router.js文件：

import ComA from '../components/ComA'
import ComB from '../components/ComB'
import ComC from '../components/ComC'
import ComD from '../components/ComD'
let routes = [
    {
        path: "/",
        component: ComA,
        exact: true
    },
    {
        path: "/b",
        component: ComB
    },
    {
        path: "/c/:cid",
        component: ComC
    },
    {
        path: "/d",
        component: ComD
    }
]
export default routes;

上面例子中的RouterABC.js可以改成下面这样：

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import routes from '../model/router'

class RouterABC extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return (
      <Router>
         ...
          {
            routes.map((route, key) => {
              if (route.exact) {
                return <Route key={key} exact path={route.path} component={route.component} />
              } else {
                return <Route key={key} path={route.path} component={route.component} />
              }
            })
          }
      </Router>
    );
  }
}
export default RouterABC;

涉及到路由的嵌套部分，上面路由模块化还需要改成下面这样：

return <Route key={key} exact path={route.path}
    render={props => (
        <route.component {...props} routes={route.routes} />
    )
    } />