带有react-router-dom链接的SpeedDialAction

j

我的SpeedDialAction样子是这样的:

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

单击操作后,我想导航至/ add。有没有一种方法,而无需手动使用onClick和使用/add历史记录推送

例如,一个按钮允许如下所示:

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

您可以使用来包装图标<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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

带有 Reactstrap 和 React Router Dom 的 Active NavLink

来自分类Dev

如何使用React正确设置react-router-dom链接

来自分类Dev

使用带有可选URL参数的react-router链接设置活动类

来自分类Dev

History.Push链接到带有React Router的新选项卡

来自分类Dev

如何使用带有typescript的react router dom导航到新页面

来自分类Dev

TypeError:undefined不是带有React-router-dom的对象(评估“ undefined.state”)

来自分类Dev

模拟React-Router-dom useHistory和其他带有笑话的钩子

来自分类Dev

react-router-dom <链接>未更新页面

来自分类Dev

react-router-dom链接-悬停时隐藏URL

来自分类Dev

如何使用CSS在React Router Dom中选择链接标签?

来自分类Dev

可重用的 react-router-dom 链接 hrefs

来自分类Dev

带有KOA的React Router的同构React

来自分类Dev

React Router深层链接

来自分类Dev

如何使用带有react-redux的react-router-dom v6.0.0渲染不同的组件

来自分类Dev

使用链接测试React Router

来自分类Dev

设置React Router链接的样式

来自分类Dev

React Router Dom的<Switch>问题

来自分类Dev

带有 Typescript 的 React Router 未定义“React”

来自分类Dev

在react-router-dom链接中传递参数不能正常工作

来自分类Dev

react-router-dom链接无法导航到目标页面的开始

来自分类Dev

有条件地与react-router链接

来自分类Dev

React-router链接,传入参数

来自分类Dev

使用React-Router-Dom创建PrivateRoute

来自分类Dev

react-router-dom 元素类型无效

来自分类Dev

React-router-dom 重定向问题

来自分类Dev

ReactJS - 关于 react-router-dom 的问题

来自分类Dev

react-router-dom:如何在Switch中拥有多个具有各自路径的“外壳”?

来自分类Dev

每当我更改页面时,都会调用React useEffect(带有[])(React Router)

来自分类Dev

为什么没有通过 react-router 中的链接收到道具

Related 相关文章

  1. 1

    带有 Reactstrap 和 React Router Dom 的 Active NavLink

  2. 2

    如何使用React正确设置react-router-dom链接

  3. 3

    使用带有可选URL参数的react-router链接设置活动类

  4. 4

    History.Push链接到带有React Router的新选项卡

  5. 5

    如何使用带有typescript的react router dom导航到新页面

  6. 6

    TypeError:undefined不是带有React-router-dom的对象(评估“ undefined.state”)

  7. 7

    模拟React-Router-dom useHistory和其他带有笑话的钩子

  8. 8

    react-router-dom <链接>未更新页面

  9. 9

    react-router-dom链接-悬停时隐藏URL

  10. 10

    如何使用CSS在React Router Dom中选择链接标签?

  11. 11

    可重用的 react-router-dom 链接 hrefs

  12. 12

    带有KOA的React Router的同构React

  13. 13

    React Router深层链接

  14. 14

    如何使用带有react-redux的react-router-dom v6.0.0渲染不同的组件

  15. 15

    使用链接测试React Router

  16. 16

    设置React Router链接的样式

  17. 17

    React Router Dom的<Switch>问题

  18. 18

    带有 Typescript 的 React Router 未定义“React”

  19. 19

    在react-router-dom链接中传递参数不能正常工作

  20. 20

    react-router-dom链接无法导航到目标页面的开始

  21. 21

    有条件地与react-router链接

  22. 22

    React-router链接,传入参数

  23. 23

    使用React-Router-Dom创建PrivateRoute

  24. 24

    react-router-dom 元素类型无效

  25. 25

    React-router-dom 重定向问题

  26. 26

    ReactJS - 关于 react-router-dom 的问题

  27. 27

    react-router-dom:如何在Switch中拥有多个具有各自路径的“外壳”?

  28. 28

    每当我更改页面时,都会调用React useEffect(带有[])(React Router)

  29. 29

    为什么没有通过 react-router 中的链接收到道具

热门标签

归档