Блог

У меня есть эти кнопки, на которые я хотел бы добавить ссылку для перенаправления:

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

Знаете ли вы, как правильно реализовать эту функциональность?

1. Убедитесь, что вы установили react-router-dom . @material-ui/core/Link не получится.
2. Импортируйте BrowserRouter из react-router-dom корневого компонента и оберните его внутри.

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

3. В своем Root компоненте укажите Route s с path render компонентом и и оберните их внутри Switch компонента. Switch обеспечивает соответствие только одного из Route детей. URL-адрес оценивается по Route компонентам внутри Switch , и отображается первый Route компонент, который path соответствует префиксу URL-адреса. Вот почему вы должны быть осторожны с порядком Route компонентов внутри Switch

 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;
 

4. Использовать Link с react-router-dom

 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;
 

Вот рабочая демонстрация

Внутри вашей кнопки вы можете добавить:

onClick={событие => окно.местоположение.href=’/ваш-href’}