score:14

Accepted answer

Found a solution here: https://github.com/rackt/react-router/issues/975, and here: https://github.com/rackt/react-router/issues/1499

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:

this.context.router.transitionTo(/path-to-link);

score:0

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 ... .")

score:2

Take a look at the Navigation mixin from react-router. http://rackt.github.io/react-router/#Navigation

From the docs:

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

React.createClass({
  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>
    );
  }
});

score:2

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.

score:2

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(){
    history.push('/my-route')
  }
}

score:2

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

score:12

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

import {browserHistory} from "react-router";

functionName() {
 browserHistory.push("/path-to-link");
}

score:26

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 = "http://foo.com/error.php";
          }
     }
    

Related Query

More Query from same tag