通过 React-Router v5 链接传递对象

Question

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

应用程序.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

CSV文件页

 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, }, ], }

Answer 1

您的州位于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> }