状态未定义在位置反应路由器 dom 链接答案

【问题标题】：state undefined in location react router dom link状态未定义在位置反应路由器 dom 链接
【发布时间】：2021-01-12 18:17:53
【问题描述】：

组件 1 通过链接传递状态

<Link to={{
        pathname: "/Dashboard",
        state: { color: "red" }
    }}>

组件 2 接收状态

import React from 'react';

export interface DashboardProps {
  location: any;
}

export interface DashboardState {

}

class Dashboard extends React.Component<DashboardProps, DashboardState> {

  render() {
    console.log("props", this.props.location);

    return (
      <h1>dashboard</h1>
    );
  }
}

export default Dashboard;

结果

主组件渲染

   public render() {
    return (
      <HashRouter>
        <div>
          <Route path="/Dashboard" render={(props: any) => (<Dashboard {...props} />)} />
        </div>
      </HashRouter >
    )
  }

我相信我不需要包装我的仪表板（通过链接反应路由器 dom 接收状态的组件）用“withRouter”

【问题讨论】：

标签： reactjs react-router-dom react-props

【解决方案1】：

真可惜！ HashRouter 不支持 location.state：你可以在这里看到https://github.com/ReactTraining/react-router/issues/7628或https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/HashRouter.md

【讨论】：

虽然这可能会回答问题，但如果可能的话，您应该 edit 您的回答包括来自答案本身提供的链接中最重要和相关的信息。如果链接停止工作或内容发生重大变化，这有助于确保您的答案不会变得无效。