React.JS向Link传state后props.location.state为undefined如何解决

• Link组件参数传递格式错误：你当前将state作为Link的独立属性传递，且to属性直接使用路由字符串，部分react-router版本不支持该传参方式；同时你提供的Link代码中state对象缺少闭合符号}}，属于语法错误，导致参数未被正确解析。
• 路由版本不兼容：如果使用react-router v6版本，Route组件的component属性已被废弃，且组件默认不会被注入location相关props，直接通过props.location取值自然返回undefined。
• 路径不匹配：to属性使用相对路径private/orders，如果当前页面路由非根路径，可能导致跳转路径和配置的路由不匹配，state参数丢失。

react-router v5 版本修复步骤 #

1. 修正Link组件写法，to属性传入包含pathname和state的对象，补全语法：

<Link  
   to={{
    pathname: "/private/orders",
    state: {
      x: "y",
      y: "y",
      z: "y",
      i: "y"
    }
   }}
>
  <CButton color="primary">Order Now</CButton>
</Link>

2. 原有路由配置无需修改，目标组件直接通过props.location.state即可获取参数。

react-router v6 版本修复步骤 #

1. 修正路由配置，将component属性替换为element属性：

<Route exact path="/private/orders" name="Orders" element={<PrivateOrders />} />

2. 按上面v5的Link修正方案调整参数传递写法。
3. 目标组件使用useLocation钩子获取state参数：

import React from 'react'
import { useLocation } from 'react-router-dom'

const PrivateOrders = () => {
    const location = useLocation()
    console.log(location.state)
    return (
        <div>
            <h1>Orders</h1>
        </div>
    )
}

export default PrivateOrders

内容的提问来源于stack exchange，提问作者kakakakakakakk