我的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] 删除。
我来说两句