How to emulate window.location with react-router and ES6 classes

Question

I'm using react-router, so I use the <Link /> component for my links throughout the app, in some cases I need to dynamically generate the link based on user input, so I need something like window.location, but without the page refresh.

I found this little note - (https://github.com/rackt/react-router/issues/835) - i tried using this.context.router.transitionTo(mylink) but I'm having issues with context...

which led me to (https://github.com/rackt/react-router/issues/1059), however context returns and empty object, so when I try todo something like: this.context.router.transitionTo(mylink); I get Cannot read property 'transitionTo' of undefined (if I try to do something like set this.context = context within the constructor).

Not to drag on, but I'm also weary of messing too much with context as it is undocumented on purpose as it's still a work in progress, so I've read.

Has anyone come across a similar issue?

Answer 1

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";
         }
    }
   

Answer 2

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

Answer 3

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

import {browserHistory} from "react-router";

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

Answer 4

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>

Answer 5

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>
    );
  }
});

Answer 6

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.

Answer 7

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')
  }
}

Answer 8

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

Answer 9

Hmmm. I ended up having to do this (I think I'm running an older version of react 16.14.0, react-router, react-router-dom, and history 5.3.0 and other dependencies for compatibility reasons):

import (createBrowserHistory) from 'history';

const broswerHistory = createBrowserHistory();

const SomeFunction = props => {
   browserHistory.push('Thepath');
   browserHistory.go('SamePath');
}

The push by itself just put the path into the browser address bar without going there. The go by itself just reloaded the current page.

Hope this helps someone out.

Answer 10

You can use this to avoid reloading:

this.props.history.push({
  pathname: `/page/${id}/something`
})