SpeedDialAction с реакцией-роутер-дом Линк

Question

Мой SpeedDialAction выглядит следующим образом:

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

Я хочу перейти к / добавить, когда нажимается действие. Есть ли способ сделать это, не используя onClick и не используя pu sh /add для истории вручную?

Например, кнопка позволяет что-то вроде этого:

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

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 /> с помощью <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