Javascript 通过<；链接/>；但是在React中使用React路由器无法定义

我正在努力使用

将一些数据从一个组件传递到另一个组件。我无法将任何参数传递到我的URL，因此，请原谅该解决方案。下面是我的问题示例文件

App.jsx

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

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

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

这里，

FirstComponent

与

LinkingComponent

没有直接链接或关联。我正在使用仪表板中的

LinkingComponent

，并在那里传递我的“数据”。它正在

链接组件中正确接收它。但不知何故，每当我试图在我的
FirstComponent
中访问它时，它都会给我一个错误，即它是未定义的。我已经尝试过各种解决方案，读过各种文章，但找不到合适的解决方案

请帮我解决这个问题。蒂亚

首先，摆脱
路由器
或
浏览器路由器
，因为
路由器
通常只是
浏览器路由器
的别名。下面是您可能看到的导入：
然后，您的App.jsx将如下所示：

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

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>;
}

此外，您还需要使用react router提供的
With router
HOC包装
第一个组件
，以获取
第一个组件
道具中的
位置
道具
首先，摆脱
路由器
或
浏览器路由器
，因为
路由器
通常只是
浏览器路由器
的别名。下面是您可能看到的导入：
然后，您的App.jsx将如下所示：

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

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>;
}

此外，您还需要使用react router提供的
With router
HOC包装
第一个组件
，以获取
第一个组件
道具中的
位置
道具
我创建了一个小例子。玩它。
我创建了一个小示例。玩它。
一切看起来都是正确的。你点击链接了吗？是的。该页面正在被路由到。但是，
this.props.location.state.userDetails
的值也没有定义。为什么在一个项目中使用
BrowserRouter
和
Router
？删除
BrowserRouter
仅保留
Router
。但这并不能解决问题：（一切看起来都是正确的。你点击链接了吗？是的。该页面正在被路由到。但是，
this.props.location.state.userDetails
的值还没有定义。为什么你要在一个项目中使用
BrowserRouter
和
Router
？删除
BrowserRouter
仅保留
Router
。这并不能解决问题但问题是：(