如何将appState传递给react-router路由路径并解决相关报错

• appState是GetUserBuckets.js组件内部通过useState声明的局部状态，作用域完全封闭在该组件内部，定义路由的index.js不存在对这个变量的引用，直接使用必然触发appState未定义报错
• Route组件本身不支持接收自定义业务属性，你写在Route标签上的buckets={appState.buckets}不会自动透传给下游的Bucket组件，属于无效写法
• withRouter的功能边界仅为：给没有被Route直接渲染的组件注入路由自带的match/location/history三个属性，完全不负责透传业务自定义props，用它来解决跨页面传值从一开始方向就错了，自然会持续遇到问题

1. 依托现有react-redux打通数据通路，放弃手动跨组件传props #

这是适配你现有技术栈、维护成本最低的方案：

• 把GetUserBuckets.js里useEffect中发起axios请求、更新appState的逻辑，迁移到redux异步action中
• 请求成功拿到桶数据后，将数据存入redux store，后续任何页面、任意路由层级需要获取buckets，直接通过useSelector读取即可，完全不需要依赖路由层的props透传

2. 修正路由的自定义props透传写法 #

如果确实需要在路由层向子组件传递数据，自定义props必须写在render回调返回的子组件上，而非直接写在Route标签上：

// 在路由文件中直接从redux取需要的桶数据，不再引用其他组件内部的局部appState
const buckets = useSelector(state => state.bucketModule.buckets)

<Route 
  path="/dash/:slug" 
  render={(routeProps) => <Bucket {...routeProps} buckets={buckets} />} 
/>

没必要为了跨页面传值把组件内部的局部状态一层层向上冒泡到路由文件。既然已经接入redux，把需要跨页面共享的桶数据存在全局store里，全局可查可改，不需要依赖路由的props透传机制实现数据共享。

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