Accepted answer

Found a solution here:, and here:

Needed in constructor:

class SidebarFilter extends React.Component {

    constructor(props, context) {
        super(props, context);

Also need to add a static property:

SidebarFilter.contextTypes = {
  router: React.PropTypes.func.isRequired

Then I could call:



the best way is to use useHistory from react-router-dom. First you have to import it :

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

Then , you have to declare an instance of it by doing this :

  let history = useHistory();

then inside an arrow function or whatever are your case do this :

history.push("Type here your route link not a domain not anythins else ... .")


Take a look at the Navigation mixin from react-router.

From the docs:

var Navigation = require('react-router').Navigation;

  mixins: [Navigation],

  render: function() {
    return (
      <div onClick={() => this.transitionTo('foo')}>Go to foo</div>
      <div onClick={() => this.replaceWith('bar')}>Go to bar without creating a new history entry</div>
      <div onClick={() => this.goBack()}>Go back</div>


In such a situation i normally use hashHistory or browserHistory depending on what you are using and simply call hashHistory.push(<url>). If you are using ES6 classes you can also go for the withRouter Hoc provided by react-router as mentioned here. This higher order component exposes a prop in your component called router. Using this prop you can redirect using this.props.router.push(<url>).

If you have to use the router from the context you will have to provide the context types as mentioned in @Ben's answer.


Use useHistory to get the history object and push to it to change the url

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

export default function ModificarUsuario({ url }) {
  const history = useHistory();
  function newRoute(){


Use Link from react-router-dom, in my snippet I was using the material-ui <Button>

import {Link} from "react-router-dom";
<Button color="primary" 
to="/join" component={Link}>
Join a Room


If you are using browserHistory for React-router, life is simpler.

import {browserHistory} from "react-router";

functionName() {


After wasting time with react router, I finally switch to basic javascript.

  1. Create a component for your redirect:

    Route path="*" component={NotFound}

  2. In the component use window.location to redirect:

     componentDidMount() {
          if (typeof window !== 'undefined') {
               window.location.href = "";

Related Query

More Query from same tag