63 react 通过路由传参

react 通过路由传输数据

react 通过路由传输数据的方式有很多种，但是最重要、最常用的是能持久保存，否则刷新页面传输的数据就会消失。

使用 state 传输数据

传输数据写法

import React from 'react'

const App = props => {
    const handleRun = () => {
        props.history.push({pathname: '/路径', state: {msg: 'data'})
    }
    return (<button onClick={handleRun}>
    		点击跳转并传输数据
    	</button>)
}

export default App

获取数据写法

import React from 'react'

const Data = props => {
    return (<h1>
        	{props.location.state?.msg}
        </h1>)
}

export default Data

因为初次 props.location.state 不存在，为 undefined ，渲染时如果直接打点调用 msg 会报错，而当 props.location.state 获取到之后才有一个对象值，由于 props 更新，再次渲染时打点调用 msg 就能正确获取值并渲染。所以需要使用一个可选链操作符 ?.