реагирующий маршрутизатор всегда направляет меня к последнему толчку истории при ручном наборе URL - PullRequest
0 голосов
/ 01 января 2019

После того, как я сделаю одну функцию history.push(), ввод url в строке поиска больше не будет работать.Это всегда будет возвращать меня к последней странице, которую я отправил в историю.

Мой код для этого на Github здесь

Есть также демосайт, работающий на Heroku здесь

Простейший пример, который может вызвать эту проблему, - при входе на сайт я использовал history.push(), чтобы перенаправить пользователя на его страницу пользователя.После этого весь набранный URL-адрес будет направлен на эту страницу в конце.

Здесь находится App компонент

import React, { Component } from 'react';
import './App.css';
import './default.css';
import { CookiesProvider } from 'react-cookie';
import TokenAuth from './components/default/TokenAuth';

class App extends Component {
    render() {
        return (
            <CookiesProvider>
                <TokenAuth />
            </CookiesProvider>
        );
    }
}

export default App;

Здесь находится TokenAuth Компонент

import React, { Component } from 'react';
import history from '../../history';
import { Router, Route, Switch } from 'react-router-dom';
import { withCookies } from 'react-cookie';
import Home from './Home';
import Login from './Login';
import SignUp from './SignUp';
import NotFound from './NotFound';
import WrappedUserHome from './UserHome';
import Activate from './Activate';
import ThankYou from './ThankYou';
import PasswordReset from './PasswordReset';
import PasswordResetRequest from './PasswordResetRequest';

const Api = require('../../lib/Api');

class TokenAuth extends Component {
    constructor() {
        super();
        this.state = { cookieName: "my-react-rails-template", jwt: null, user: null };
        this.login = this.login.bind(this);
        this.logout = this.logout.bind(this);
        this.autoLogin = this.autoLogin.bind(this);
    }

    login(jwt) {
        const { cookies } = this.props;
        Api.getCurrentUser(jwt)
        .then((res) => {
            this.setState({ user: res, jwt: jwt }, () => {
                // Cookie will last for 1 day
                cookies.set(this.state.cookieName, jwt, {path: '/', maxAge: 86400});
                history.push("/users/" + this.state.user.id);
            })
        }).catch((err) => {

        });
    }

    logout() {
        const { cookies } = this.props;
        this.setState({ user: null, jwt: null });
        cookies.remove(this.state.cookieName);
    }

    autoLogin() {
        const { cookies } = this.props;
        let jwt = cookies.get(this.state.cookieName);
        if (jwt) {
            this.login(jwt);
            cookies.set(this.state.cookieName, jwt, {path: '/', maxAge: 86400});
        }
    }

    componentDidMount() {
        this.autoLogin();
    }

    render() {
        return (
            <Router history={history}>
                <Switch>
                    <Route exact path='/' render={() => <Home appState={this.state} logout={this.logout}/>} />
                    <Route path='/login' render={() => <Login login={this.login} />} />
                    <Route path="/signup" render={() => <SignUp />} />
                    <Route path='/activate' render={() => <Activate login={this.login} />} />
                    <Route path='/thankyou' render={() => <ThankYou />} />
                    <Route path='/password-reset-request' render={() => <PasswordResetRequest />} />
                    <Route path='/password-reset' render={() => <PasswordReset />} />
                    <Route path='/users/:id' render={() => <WrappedUserHome appState={this.state} logout={this.logout}/>} />
                    <Route render={() => <NotFound />} />
                </Switch>
            </Router>
        );
    }
}

export default withCookies(TokenAuth);

Вот файл history

import { createBrowserHistory } from 'history';

export default createBrowserHistory();
...