SpeedDialAction 与 React-router-dom 链接

Question

我的SpeedDialAction看起来像这样：

<SpeedDialAction key="Add" icon={<AddIcon />} tooltipTitle="Add" />

我想在单击操作时导航到 /add 。onClick有没有办法在不使用和手动推送/add历史记录的情况下做到这一点？

例如，按钮允许这样的操作：

<SpeedDialAction key="Add" icon={<AddIcon />} tooltipTitle="Add" />

Answer 1

您可以用 包裹图标<Link />。

根据他们的示例，您可以将其包装如下：

const withLink = (to, children) => <Link to={to}>{children}</Link>;

const actions = [
  { icon: withLink("/about", <LiveHelpIcon />), name: "About" },
  { icon: withLink("/users", <GroupIcon />), name: "Users" }
];

（显然你也可以用“正常”的方式来做）

{ icon: <Link to="/about"><LiveHelpIcon /></Link>), name: "About" },

然后，将<SpeedDial />with包裹起来<Router>并<Switch>在其后面添加，如下所示：

<Router>
  <SpeedDial
    ariaLabel="SpeedDial example"
    className={classes.speedDial}
    icon={<SpeedDialIcon />}
    onClose={handleClose}
    onOpen={handleOpen}
    open={open}
  >
    {actions.map(action => (
      <SpeedDialAction
        key={action.name}
        icon={action.icon}
        tooltipTitle={action.name}
        onClick={handleClose}
      />
    ))}
  </SpeedDial>
  <Switch>
    <Route path="/about">
      <div>About</div>
    </Route>
    <Route path="/users">
      <div>Users</div>
    </Route>
    <Route path="/">
      <div>Home</div>
    </Route>
  </Switch>
</Router>

工作示例：https ://codesandbox.io/s/material-ui-speeddial-react-router-dom-bmmwi