[JavaScript知识库]react中的路由传参方式

前言：通过路由传递完参数以后，要想在对应组件内获取，可以通过props属性。凡是使用路由跳转到的组件，在内部都可以使用props获取路由信息，这时的props上主要有三个对象，history、location、match.

1.通过Link组件中to属性，把参数写在path后面，类似于get请求，会把参数携带在请求地址后面

<Link to="/user?id=55">用户管理</Link>

在组件内获取参数可以使用props.location.search获取，因为获取到的结果要经过处理，比较麻烦，这种传参方式一般不用。

2.动态路由传参

<Link to="/goods/1">商品管理</Link>

<Switch>
    <Route path="/goods/:id" component={Goods}></Route>
</Switch>

在组件内获取参数：props.match.params

3.编程式导航传参? ? history.push(path, state)

const toOrder = () => {
        props.history.push('/order', {
            title: '夕夕'
        })
    }

...



<button onClick={toOrder}>去到订单管理</button>

在组件内获取参数：props.location.state? ??