react-route-dom v6 页面之间跳转传参

waoecher

已于 2022-07-18 15:06:52 修改

阅读量983

点赞数

文章标签：大数据前端 reactjs javascript

于 2022-07-18 14:29:54 首次发布

本文链接：https://blog.csdn.net/waoecher/article/details/125848850

版权

如果使用url穿参，则使用钩子useParams()

如果使用link传参，则可使用

<Link to={`/summary`} state={{ data: "the-page-id" }}>

接收：

const data=useLocation()
console.log(data.state)

如果：

在点击button时的数据还没返回回来，需要等数据返回后再进行路由跳转，则需使用navigate。

<Button type="primary" icon={<SearchOutlined />} onClick={submitInform}>
    Search
</Button>

function submitInform(){

        let key=inputInform.inputInform
        let api=API
        let url='http://localhost:8080/api/ApiInfo/'+api+'/'+key
        axios.get(url)
            .then(function (response) {
                console.log(response);
                // setData(response.data.data)
                // console.log(response.data.data);
                navigate("/summary", { state: response.data.data })

            })
            .catch(function (error) {
                console.log(error);
            });
    }

接收还是使用useLocation