React路由传值

1. 通过state进行传参

2. 通过params进行传参

3. 通过query进行传参

统一引用

import React from 'react';
import {
    BrowserRouter as Router,
    Route,
    Switch,
    Link
} from 'react-router-dom';
复制代码

通过state进行传参

示例

let obj = {
    pathname:'/main',
    state:{id:12,name:'dahuang1'}
};

class Index extends React.Component {
    render () {
        return (
            <Router>
                <ul>
                    <li>
                        <Link to="/header"> header</Link>
                    </li>
                    <li>
                        <Link to={obj}> main</Link>
                    </li>
                    <li>
                        <Link to={{pathname:'/box',state:{id:13,name:'这是第二个值'}}}> box</Link>
                    </li>
                    <li>
                        <Link to="/foot"> foot</Link>
                    </li>
                </ul>
                <Switch>
                    <Route path="/:main" component={ User }></Route>
                </Switch>
            </Router>
        )
    }
};

function User ( props ) {
    console.log( props );
    return (
        <div>
            <h2>通过state获取参数</h2>
            <div>获取name:{ props.location.state.name }</div>
            <div>获取name:{ props.location.state.id }</div> 
        </div>
    )
};
复制代码

解析

上面定义路由和传参的时候，用的是obj，根据react的方式 {{}} 第一个花括号是js，第二个花括号代表对象，我就把它单独拎出来了。（看自己需求）

开始传参 <Link to={obj}> main</Link>

接收参数

 function User ( props ) {
    console.log( props );
    return (
        <div>
            <h2>通过state获取参数</h2>
            <div>获取name:{ props.location.state.name }</div>
            <div>获取name:{ props.location.state.id }</div> 
        </div>
    )
};

复制代码

在props中打印 location.state接收传参内容，不在路由里显示，隐式传参，刷新页面数据不会丢失

通过params进行传参

代码大致和上面类似，就不全部粘贴出来了。

开始传参


//先定义传参数值
constructor ( props ) {
    super( props );
    this.state = {
        name:'1',
        id:10,
        footName:'1',
        footId:20
    }
}
    
    
let params = {
    pathname:`/header/${this.state.name}/${this.state.id}`
}
复制代码

//方式一：
<Link to={params}>header</Link>
//方式二：
<Link to={{ pathname:`/foot/${this.state.footName}/${this.state.footId}`}}>foot</Link>
复制代码

接收参数

<Switch>
    <Route path="/:header/:name/:id" component={ User } ></Route>
</Switch>
 function User ( props ) {
    console.log( props );
    return (
        <div>
            <h2>通过state获取参数</h2>
            <div>获取name:{ props.match.params.name }</div>
            <div>获取name:{ props.match.params.id }</div> 
        </div>
    )
};

复制代码

在props中打印match.params内容，会在路由路径上面显示，刷新页面数据不会丢失

通过query进行传参

解析

开始传参

//先定义传参数值
let query = {
    pathname:'/head',
    query:{id:22,name:'张三'}
}
复制代码

//方式一：
<Link to={query}>头部</Link>
//方式二：
 <Link to={{pathname:'/main',query:{id:2,name:'你好'} }}>中间部分</Link>
复制代码

接收参数


<Switch>
    <Route path="/:head" component={ params }></Route>
</Switch>

function params ( props ) {
    console.log(props);
    return (
        <div>
            <h3>接收参数信息</h3>
            <div>这是参数name:{ props.location.query.name }</div>
            <div>这是参数id:{ props.location.query.id }</div>
        </div>
    )
};

复制代码

在props中打印 location.query接收传参内容，不在路由里显示，隐式传参,刷新页面参数会丢失

** 路由传值，在React里面调用和Vue传值，Jquery传值，原始url传值类似，只是每一个框架都多了一个自己的声明包裹。**