通过 <Link /> 传递数据，但在 React 中使用 React Router 未定义答案

【问题标题】：Passing data through <Link /> but getting undefined using React Router in React通过 <Link /> 传递数据，但在 React 中使用 React Router 未定义
【发布时间】：2020-04-03 10:29:54
【问题描述】：

我正在努力使用<Link /> 将一些数据从一个组件传递到另一个组件。我无法将任何参数传递给我的 URL，因此请原谅该解决方案。以下是我的问题中的示例文件，

App.jsx

<BrowserRouter>
  <Router history={history}>
    <Route exact path={'/my-dashboard/first-page'} component={FirstComponent}/>
  </Router>
</BrowserRouter>

LinkingComponent.jsx

const LinkingComponent = ({ data }) => {
  return (
    <Link
      to={{
        pathname: '/my-dashboard/first-page',
        state: { userDetails: data }
      }}
    >
      {data.firstName}
      &nbsp;
      {data.lastName}
    </Link>
  );
};

FirstComponent.jsx

const FirstComponent = props => {
  const {
    location: {
      state: { userDetails }
    }
  } = props;
  console.log('user-detail', userDetails);
 ....
 some data manipulations
 ....
}

这里，FirstComponent 与LinkingComponent 没有直接链接或关联。我在仪表板中使用LinkingComponent，并在那里传递我的“数据”。它在LinkingComponent 中正确接收它。但不知何故，每当我尝试在我的FirstComponent 中访问它时，它都会给我一个未定义的错误。我已经尝试了各种解决方案，阅读了各种文章，但找不到合适的解决方案。

请在此处帮助我解决问题。 TIA。

【问题讨论】：

一切看起来都正确。你点击链接了吗？
是的。该页面正在被路由到。尽管如此，this.props.location.state.userDetails 的值也未定义。
为什么在一个项目中使用BrowserRouter和Router？仅删除 BrowserRouter 保留 Router。
但这并不能解决问题。 :(

标签： javascript reactjs react-redux react-router

【解决方案1】：

首先，去掉Router或BrowserRouter，因为Router通常只是BrowserRouter的别名。以下是您可能会看到的导入：

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

然后，您的 App.jsx 将是：

<Router>
   <Route exact path={'/my-dashboard/first-page'} component={FirstComponent}/>
</Router>

其次，这是严重错误：

const FirstComponent = props => {
  const {
    location: {
      state: { userDetails }
    }
  } = props;
  console.log('user-detail', userDetails); // <- Seriously wrong!
  return <div>FirstComponent</div>;
}

虽然FirstComponent是一个函数，但它不是一个普通的javascript函数而是React函数组件！你需要有一个生命周期方法（componentDidMount）才能看到userDetails prop。

假设你知道 Hooks，你的 FirstComponent 会是这样的：

import { useEffect } from "react"

const FirstComponent = props => {
  const {
    location: {
      state: { userDetails }
    }
  } = props;

  useEffect(() => {
     console.log({ userDetails }); // <- Better console.log with Object
  }, []) // <- empty dependency = componentDidMount

  return <div>FirstComponent</div>;
}

另外，您需要将 FirstComponent 包装为由 react-router 提供的 withRouter HOC，以在您的 FirstComponent 的 props 中获取 location props。

【讨论】：

【解决方案2】：

Here我创建了一个小例子。玩它。

【讨论】：