react-router > redirect does not work

Question

I have searched on the internet for this topic and I have found many different answer but they just do not work.

I want to make a real redirect with react-router to the '/' path from code. The browserHistory.push('/') code only changes the url in the web browser but the view is not refreshed by browser. I need to hit a refresh manually to see the requested content.

'window.location = 'http://web.example.com:8080/myapp/'' works perfectly but i do not want to hardcode the full uri in my javascript code.

Could you please provide me a working solution?

I use react ^15.1.0 and react-router ^2.4.1.

My full example:

export default class Logout extends React.Component {
    handleLogoutClick() {
        console.info('Logging off...');
        auth.logout(this.doRedirect());
    };

    doRedirect() {
        console.info('redirecting...');
        //window.location = 'http://web.example.com:8080/myapp/';
        browserHistory.push('/')
    }

    render() {
        return (
            <div style={style.text}>
                <h3>Are you sure that you want to log off?</h3>
                <Button bsStyle="primary" onClick={this.handleLogoutClick.bind(this)}>Yes</Button>
            </div>
        );
    }
}

score 3 · Accepted Answer · answered Jul 23 '16 at 12:56

You can use router.push() instead of using the history. To do so, you can use the context or the withRouter HoC, which is better than using the context directly:

import { withRouter } from 'react-router';

class Logout extends React.Component {
    handleLogoutClick() {
        console.info('Logging off...');
        auth.logout(this.doRedirect());
    };

    doRedirect() {
        this.props.router.push('/') // use the router's push to redirect
    }

    render() {
        return (
            <div style={style.text}>
                <h3>Are you sure that you want to log off?</h3>
                <Button bsStyle="primary" onClick={this.handleLogoutClick.bind(this)}>Yes</Button>
            </div>
        );
    }
}

export default withRouter(Logout); // wrap with the withRouter HoC to inject router to the props, instead of using context

thanx for the reply. it works like a charm. i do not know what is the different between these two solutions, maybe your is working faster. I am going to use what you have suggested. — zappee, Jul 23 '16 at 13:39
Welcome. Router.push is just a method of the router that uses history.push. Nothing fancy :) — Ori Drori, Jul 23 '16 at 14:04

score 1 · Answer 2 · edited May 23 '17 at 12:17

Solution:

AppHistory.js

import { createHashHistory } from 'history';
import { useRouterHistory } from 'react-router';

const appHistory = useRouterHistory(createHashHistory)({
    queryKey: false
});

export default appHistory;

Then you can use appHistory from everywhere in your app.

App.js

    import appHistory from './AppHistory';
    ...
    ReactDom.render(
    <Router history={appHistory} onUpdate={() => window.scrollTo(0, 0)}>
    ...
    </Router>,
    document.getElementById('root')
);

Logout.js

import React from 'react';

import appHistory from '../../AppHistory';
import auth from '../auth/Auth';
import Button from "react-bootstrap/lib/Button";

export default class Logout extends React.Component {

    handleLogoutClick() {
        auth.logout(this.doRedirect());
    }

    doRedirect() {
        appHistory.push('/');
    }

    render() {
        return (
            <div style={style.text}>
                <h3>Are you sure that you want to log off?</h3>
                <Button bsStyle="primary" onClick={this.handleLogoutClick.bind(this)}>Yes</Button>
            </div>
        );
    }
}

this topic helped me a lot: Programmatically navigate using react router

react-router > redirect does not work

2 Answers2