¿Cómo navegar en la ruta haciendo clic en el botón en react router v4?

Solución:

import {withRouter} from 'react-router-dom';
...

class App extends React.Component {
  ...

  nextPath(path) {
    this.props.history.push(path);
  }

  render() {
    return (
      <button onClick={() => this.nextPath('/the/path') }>
        change path 
      </button>
    );
  }
}

export default withRouter(App);

Si usa el botón solo para la navegación, puede reemplazarlo con <Link />¹ y aplique un estilo de botón.

<Link to='/new/location/'>Click Me</Link>

O puede usar el <NavLink />².

En caso de utilizar Material UI, puede utilizar el siguiente código:

import { Link } from 'react-router-dom'
import Button from '@material-ui/core/Button';

<Button component={Link} to="/new/location/">
  Click Me
</Button>

---

(1): import {Link} from "react-router-dom";

(2): import {NavLink} from "react-router-dom";

react-router-dom exporta un gancho llamado useHistory. Simplemente impórtelo y úselo en su componente de esta manera:

import React from 'react';
import { useHistory } from 'react-router-dom';

export default () => {
  const history = useHistory();
   
  return (
    <button onClick={() => history.push('/your/path')}>
      Click me
    </button>
  );
};

Estoy usando:

• “reaccionar”: “^ 16.13.1”
• “react-router-dom”: “^ 5.2.0”

Consulte esta publicación para obtener más detalles: https://ultimatecourses.com/blog/programmatic-navigate-react-router

---

---

Utiliza Nuestro Buscador