如何将道具传递给组件以在material-ui中的ListItem标签内路由？答案

【问题标题】：How to pass props to a component for routing inside ListItem tag in material-ui?如何将道具传递给组件以在material-ui中的ListItem标签内路由？
【发布时间】：2021-07-26 00:14:47
【问题描述】：

下面是代码sn-p：

const AppList = (props) => {
  return (
    <Router>
      <div>
        <ListItem
          button
          component={Link}
          to="/MainComponent"
        >
        ..
        ..
        </ListItem>
      </div>
    </Router>
   )
 }

MainComponent 路由是在起始页中定义的，我想将 props 传递给该路由，有什么办法吗？

【问题讨论】：

你是怎么解决这个问题的？以防万一解决了
我使用 uselocation (Hooks) 来做到这一点

标签： reactjs react-router material-ui react-props

【解决方案1】：

在我开始之前，代码来自： https://github.com/mui-org/material-ui/issues/7956

您好，您应该创建自己的组件，使用该链接并将道具传递给它，如下所示：

import React from 'react';
import { MemoryRouter as Router } from 'react-router';
import { Link, LinkProps } from 'react-router-dom';
import ListItem from '@material-ui/core/ListItem';

// The usage of React.forwardRef will no longer be required for react-router-dom v6.
// see https://github.com/ReactTraining/react-router/issues/6056
const AdapterLink = React.forwardRef((props, ref) => (
  <Link innerRef={ref} {...props} />
));

const CollisionLink = React.forwardRef(
  (props, ref) => <Link innerRef={ref} to="/getting-started/installation/" {...props} />,
);

export default function ButtonRouter() {
  return (
    <Router>
      <ListItem color="primary" component={AdapterLink} to="/">
        Simple case
      </ListItem>
      <ListItem component={CollisionLink}>Avoids props collision</ListItem>
    </Router>
  );
}

当您传递给它时，此代码将移动到 AdapterLink，因此您可以像这样发送它：到={ 路径名：'/模板'，状态：{某事：“某事”} }

【讨论】：

你能帮我破解这段代码吗，比如这里到底发生了什么？ props 是如何通过链接传递的，并且可以被另一个页面中定义的组件使用？
@AmitTiwari 访问您在 FC 中导航到的组件中的状态，从 let location = useLocation(); 访问它，然后从 location.state 访问它，然后您将获得所有状态
@TalOrlanczyk，AdapterLink 和CollisionLink 之间的区别在于AdapterLink 是可重复使用的，而CollisionLink 在to 属性中有一个固定链接，对吧？
是的，适配器给了你更多可重用的组件