Tengo estos botones a los que me gustaría agregar un enlace para redirigir:
<Tooltip title="Open New Ticket"> <IconButton aria-label="filter list"> <AddTwoToneIcon /> </IconButton> </Tooltip>Agregué esto:
<Tooltip title="Open New Ticket"> <Link to='open-ticket'> <IconButton aria-label="filter list"> <AddTwoToneIcon /> </IconButton> </Link> </Tooltip>Pero cuando presiono el botón no soy redirigido a una nueva página. Este botón, por ejemplo, funciona bien:
<Link to='open-ticket'> <Button variant="contained" color="primary" size="small" startIcon={<SaveIcon />} > Open Ticket </Button> </Link>¿Sabes cuál es la forma correcta de implementar esta funcionalidad?
react-router-dom . @material-ui/core/Link no funcionará.BrowserRouter desde react-router-dom y envuelva su componente raíz dentro. import { BrowserRouter } from "react-router-dom" import Root from "./views/Routes"; ... const App = props => { return ( <BrowserRouter> <Root /> </BrowserRouter> ); }Root , especifique las Route con la path y el componente de render y envuélvalos dentro del componente Switch . Switch impone que solo coincida uno de los elementos secundarios de la Route . La URL se evalúa con los componentes Route dentro de Switch y se representa el primer componente Route cuya path coincide con el prefijo de la URL. Es por eso que debe tener cuidado con el orden de los componentes de Route dentro de 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;Link de 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;Aquí hay una demostración de trabajo
Dentro de tu botón puedes agregar:
onClick={evento => ventana.ubicación.href='/tu-href'}