React роутер goBack () не работает должным образом

Question

Я столкнулся с проблемой.Я использую React-Router-DOM для маршрутизации.Это работает хорошо, но goBack не работает должным образом.Когда я нажал кнопку «Назад», он сначала перешел на страницу NotFound / Signin, а затем перенаправил на заднюю страницу.Как я могу преодолеть эту проблему?

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

В компоненте:

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

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

В ответ

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

Answer 1

Один из возможных способов - вместо использования Link - использовать history.push для динамического изменения маршрута. Для этого удалите компонент Link и определите событие onClick для «li» или «button». Теперь сначала выполните все задачи внутри функции onClick и в конце используйте history.push, чтобы изменить маршрут, значит перейти на другую страницу.

Надеюсь, это поможет

Answer 2

Это потому, что вы используете history.replace('/'). Вы заменяете, а не нажимаете, поэтому нет предыдущего маршрута.