React router goBack() not working properly

Question

I have faced a problem. I am used react-router-dom for routing. It's working well but goBack is not working properly. When I clicked back button it's 1st going to NotFound/Signin page then redirect to back page. How can I overcome this issue?

import React from 'react';
import { Router, Route, Switch } from 'react-router-dom';
import createBrowserHistory from 'history/createBrowserHistory';

import Signin from '../ui/signin/Signin';
import AddEvent from '../ui/events/AddEvent';
import EventView from '../ui/events/EventView';
import NotFound from '../ui/NotFound';

const history = createBrowserHistory();
const privatePages = [
    '/events', 
    '/addevent',

];
const publicPages = ['/', '/signup','/forgotpassword'];

const onEnterPublicPage = () => {
    if (Meteor.userId()) {
        history.replace('/events');
    }
};

const onEnterPrivatePage = () => {
    if (!Meteor.userId()) {
        history.replace('/');
    }
};

export const onAuthenticationChange = (isAuthenticated) => {

    const pathname = this.location.pathname;
    const isUnauthenticatedPage = publicPages.includes(pathname);
    const isAuthenticatedPage = privatePages.includes(pathname);

    if (isAuthenticated && isUnauthenticatedPage) {
        history.replace('/events');
    } else if (!isAuthenticated && isAuthenticatedPage) {
        history.replace('/');
    }
}

export const routes = (
    <Router history = {history}>
        <Switch>
            <Route 
            exact path="/events" 
            component={ListEvents} 
            onEnter={onEnterPrivatePage} />

            <Route 
            exact path="/addevent" 
            component={AddEvent} 
            onEnter={onEnterPrivatePage} />

            <Route  component={NotFound}/>

            <Route 
            exact path="/" 
            component={Signin} 
            onEnter={onEnterPublicPage} />

        </Switch>
    </Router>
);

In the component :

constructor(props){
        super(props);
        this.goBack = this.goBack.bind(this);
    }

    goBack(){
        this.props.history.goBack();
        //  this.props.history.push.go(-1);
    }

In the return

<Link
    to="" 
    onClick={this.goBack}
    className="back-icon">
    Back
</Link>

Solution 1

Its because you are using history.replace('/'). You are replacing, not pushing so there is no previous route.

Solution 2

One possible way is, Instead of using Link, use history.push to change the route dynamically. To achieve that remove the Link component and define the onClick event on "li" or "button". Now first perform all the task inside onClick function and at the end use history.push to change the route means to navigate on other page.

I hope this helps

Comments

[Kane]

am I replace the history.replace('/') to history.push('/') ?

[Umair Farooq]

You can try using history.push('/') and then use goBack

[Kane]

I have used goBack like ` goBack(){ this.props.history.goBack(); }` . is it right?

[Kane]

sorry, it's not working. I have added component code. Please see this.

[Umair Farooq]

You can check documentation of history . Also please check the example