按下按钮时打开 link

Question

我有这些按钮，我想添加 link 用于重定向：

<Tooltip title="Open New Ticket">
  <IconButton aria-label="filter list">
    <AddTwoToneIcon />
  </IconButton>
</Tooltip>

我添加了这个：

<Tooltip title="Open New Ticket">
 <Link to='open-ticket'>
  <IconButton aria-label="filter list">
    <AddTwoToneIcon />
  </IconButton>
 </Link>
</Tooltip>

但是当我按下按钮时，我没有被重定向到新页面。例如这个按钮工作正常：

                            <Link to='open-ticket'>
                                <Button
                                    variant="contained"
                                    color="primary"
                                    size="small"
                                    startIcon={<SaveIcon />}
                                >
                                    Open Ticket
                                </Button>
                            </Link>

您知道实现此功能的正确方法是什么吗？

Answer 1

在您的按钮中，您可以添加：

onClick={event => window.location.href='/your-href'}

Answer 2

确保您已安装 react-router-dom。 @material-ui/core/Link 将不起作用。
从 react-router-dom 导入 BrowserRouter 并将根组件包装在其中。

import { BrowserRouter } from "react-router-dom"
import Root from "./views/Routes";
...
const App = props => {
 return (
    <BrowserRouter>
      <Root />
    </BrowserRouter>
  );
}

在您的 Root 组件中，用 path 和 render 组件指定 Route 并将它们包装在 Switch 组件内。 Switch 强制只匹配 Route children 之一。 URL 是针对 Switch 内的 Route 组件和第一个 Route 组件进行评估的，其 path 是 URL 的 prefix-match，被渲染。这就是为什么你必须注意 Switch

Route

import { Fragment } from "react";
import { Route, Switch, Redirect } from "react-router-dom";
import Main from "./Main";
import Home from "./Home";
import About from "./About";
import NotFound from "./404";

const Root = (props) => {
  return (
    <Fragment>
      <Main />
      <Switch>
        <Route path="/about" render={(p) => <About {...p} />} />
        <Route path="/404" render={(p) => <NotFound {...p} />} />
        <Route path="/" render={(p) => <Home {...p} />} />
        <Redirect to="/404" />
      </Switch>
    </Fragment>
  );
};
export default Root;

使用 react-router-dom

Link

import { Link } from "react-router-dom";
import { Tooltip, IconButton, Grid } from "@material-ui/core";
import { HomeTwoTone, InfoTwoTone } from "@material-ui/icons";
const Main = (props) => {
  return (
    <Grid container spacing={2} justifyContent="center">
      <Grid item>
        <Tooltip title="Home Page">
          <Link to="/">
            <IconButton aria-label="filter list">
              <HomeTwoTone />
            </IconButton>
          </Link>
        </Tooltip>
      </Grid>
      <Grid item>
        <Tooltip title="About Page">
          <Link to="/about">
            <IconButton aria-label="filter list">
              <InfoTwoTone />
            </IconButton>
          </Link>
        </Tooltip>
      </Grid>
    </Grid>
  );
};
export default Main;

这是一个working demo

按下按钮时打开 link

Open link when button is pressed

javascript

reactjs

material-ui

react-material