reactjs - 带有 react-router-dom 链接的 SpeedDialAction

Question

我的 SpeedDialAction看起来像这样:

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

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

例如一个按钮允许这样的事情:

<Button
  component={Link}
  to={`ticket/${ticket.id}`}
  variant="contained"
  color="primary"
>
  Details
</Button>

Answer 1

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

基于 their例如，您可以像这样包装它:

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 />与 <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