第08节、路由：通过路由传值的方法

目录

在开发中路由之间的传值是必不可少的，虽然React有更优雅的方式。

最常见的传值

传值是比较简单的。在传值时，主要依靠props进行接收。路由和页面之间的传值也很类似。代码还是接着上节进行编写。

先在nav.js页面传送值，看下面的代码，传送的值为ILoveWeb。

<NavLink  to="/Jscomponentc/ILoveWeb" activeClassName="active">component-c</NavLink>|&nbsp;

我们设置了传值，如果不在路由里告诉路由，它是捕获不到的，所以还需要在路由里进行设置，这里用冒号（：）来通知路由。

<Route  path="/Jscomponentc/:param" component={Jscomponentc} />

在输出参数前，我们在jscomponentc.js页面的声明周期里看一下，这时候的props里都有什么值，了解之后，我们再进行输出。

import React from "react";

export default class jscomponentc extends React.Component{
    componentWillMount(){
        console.log(this.props);
    }
    render(){
        return(
          <div>c页面</div>
        );
    }
}

我们可以在match下的params发现我们的参数，这时候我们就可以打印在页面上了。打印代码如下。

import React from "react";

export default class jscomponentc extends React.Component{
    componentWillMount(){
        console.log(this.props);
    }
    render(){
        return(
          <div>c页面,参数：{this.props.match.params.param}</div>
        );
    }
}

多参数传值

jscomponent.js

<div>c页面,参数：{this.props.match.params.param}&nbsp;{this.props.match.params.other}</div>

index.js

<Route path="/Jscomponentc/:param/:other" component={Jscomponentc} />

nav.js

<NavLink to="/jscomponentc/ILoveWeb/secondCode" activeClassName="active">jscomponent-c</NavLink>