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 overe 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" 
            ponent={ListEvents} 
            onEnter={onEnterPrivatePage} />

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

            <Route  ponent={NotFound}/>

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

        </Switch>
    </Router>
);

In the ponent :

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>

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 overe 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" 
            ponent={ListEvents} 
            onEnter={onEnterPrivatePage} />

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

            <Route  ponent={NotFound}/>

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

        </Switch>
    </Router>
);

In the ponent :

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>

• javascript
• reactjs
• meteor
• react-router
• react-router-dom

3 Answers 3

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

One possible way is, Instead of using Link, use history.push to change the route dynamically. To achieve that remove the Link ponent 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

I have had the same issue and the history.goBack() function doesn't work with <Link /> ponent, but if you replace it for any other it will work