如何在 Reactjs 的下一个功能组件页面中从 <Link/> 组件中获取传递的数据的值答案

【问题标题】：How to get the value of the passed data from <Link/> component in my next functional component page in Reactjs如何在 Reactjs 的下一个功能组件页面中从 <Link/> 组件中获取传递的数据的值
【发布时间】：2021-10-25 16:34:14
【问题描述】：

我有两个页面，我想将数据从一个功能组件传递到另一个，我试图通过使用 <Link/> 来实现这一点，但我不知道如何在我的另一个页面中检索它：

这是我的代码：

首页：

const CustomerListResults = () => {
             <Link
                to={{
                pathname: "/app/CustomerDetails",
                data: id // your data array of objects
                }}>

                <Button
                  color="primary"
                  variant="contained"
                >
                  Expand
                </Button>
              </Link>
}

我需要数据的第二页：

const CustomerProfile = () => {
      // here i want to get the id i passed in the <Link/> component
}

我的 Routes.js 文件：

const routes = [
  {
    path: 'app',
    element: <DashboardLayout />,
    children: [
      { path: 'account', element: <Account /> },
      { path: 'customers', element: <CustomerList /> },
      { path: 'CustomerDetails', element: <CustomerDetails /> },
      { path: 'ReportDetails', element: <ReportDetails /> },
      { path: 'report', element: <ReportList /> },
      { path: 'freight', element: <FreightList /> },
      { path: 'dashboard', element: <Dashboard /> },
      { path: 'analytics', element: <Analytics /> },
      { path: 'products', element: <ProductList /> },
      { path: 'settings', element: <Settings /> },
      { path: '*', element: <Navigate to="/404" /> }
    ]
  },
  {
    path: '/',
    element: <MainLayout />,
    children: [
      { path: 'login', element: <Login /> },
      { path: 'register', element: <Register /> },
      // { path: '404', element: <NotFound /> },
      { path: '/', element: <Navigate to="/login" /> },
      { path: '*', element: <Navigate to="/app/dashboard" /> }
    ]
  }
];

export default routes;

【问题讨论】：

作为道具发送
@ABDULLOKHMUKHAMMADJONOV 你能给我一个例子代码吗？

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

【解决方案1】：

如果我没记错的话，你想从与路由器、路由和链接链接的页面传递数据。

为了实现这一点，我使用了“react-router”的“react-router-dom”insthead。

当我在一个页面上并且我以编程方式推送另一个页面时：history.push() 你甚至可以传递状态，并且你可以在其中放置任何你想要的对象。

要在另一个页面上检索它，您必须使用：useLocation().state

它将返回之前传递的状态对象。所以基本上你可以这样：

history.push({location:"path/to/next/page", state : { obj : "value1",obj2 : "value2"});

在下一页你可以像这样开始解构：

const {obj,obj2} = useLocation().state;

很抱歉我不能使用“代码模式”，因为我来自移动设备。

【讨论】：

我要从 react-router-dom 导入 usehistory 吗？还是从反应？
反应路由器域
它告诉我它不应该从这里导入
尝试导入错误：“useHistory”未从“react-router-dom”导出。
我确认 useHistory 可以从 'react-router-dom' 代码导入： import {useLocation,useHistory} from 'react-router-dom';

【解决方案2】：

你在使用 react-router <Link /> 吗？如果你是，你可以像这样使用它的useParams()：

function BlogPost() {
  let { slug } = useParams();
  return <div>Now showing post {slug}</div>;
}

你可以找到文档here

【讨论】：

当我尝试从 react-router 导入链接时，它给了我一个错误并说“尝试导入错误：链接未从 react-router 导出”
我试过了，但控制台第二页中的 id 仍然未定义。
我应该把 reactDOM.render 方法放在哪个页面？
你应该从react-router-dom导入它
对于其余的问题，您只需要在 index.js 文件中一次使用ReactDOM.render。这些部分通常位于您的 Root 文件中，例如 App.js