时间戳

首页 > 解决方案 > 通过 React-Router v5 Link 传递对象

reactjs - 通过 React-Router v5 Link 传递对象

问题描述

我想通过对象（chartData）通过react-router Link 所以我尝试这样：

应用程序.js

<Switch>
  <Route path="/csvFile" exact component={CsvFilePage} />
  <Route path="/csvFile/:id" component={CsvFilePage} />
</Switch>

设置菜单

（Link这里有，我想传递chartData给 CsvFilePage）

const SettingMenu = ({ show, chart, chartData }) => {
  return (
    <>
      <Setting show={show}>
        <Box>
          <Link
            to={{
              pathname: `/csvFile/${chart.key}`,
              state: {
                chartData: JSON.stringify(chartData),
              },
            }}
          >
            <InsertDriveFileIcon style={{ fontSize: 40 }} />
            <p>csv</p>
          </Link>
        </Box>
      </Setting>
    </>
  );
};

这里是CsvFilePage

CSVFilePage

const CsvFile = ({ match }) => {
 
 return (
 <div className="preview">
   {match.params.id === "Bar" && chartType[0]}
   </div>
 }

我搜索了它并尝试使用它，但我不知道如何从Link. 我可以得到params.id ，但我不知道如何获取对象，所以我尝试以与获取 id 相同的方式获取对象，但我没有工作

数据如下chartData所示：

{
    labels: defaultLabels,
    datasets: [
      {
        label: "dataSetting",
        data: defaultDatas,
        backgroundColor: defaultBackgroundColor,
      },
    ],
  }

标签： reactjs

解决方案

你的状态在location https://reactrouter.com/web/api/location

这就是你如何得到它：

const CsvFile = ({ match, location }) => {
 const { chartData } = location.state;
 return (
 <div className="preview">
   {match.params.id === "Bar" && chartType[0]}
   </div>
 }

推荐阅读