阅读 96
React路由传值

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传值类似,只是每一个框架都多了一个自己的声明包裹。**

文章分类
前端
文章标签