如何将道具传递给组件以在 material-ui 中的 ListItem 标记内进行路由？

Question

下面是一个代码片段：

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

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

Answer 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，因此您可以像这样发送它： to={ pathname: '/template', state: { something: 'something' } }