this.props.history.push() не работает

151
09 ноября 2021, 04:30

При переходе на /admin не работает this.props.history.push('/admin/signIn'). Когда ввожу роут в ручную, всё отлично переходит. А когда ввожу /admin, вместо редиректа получаю ошибку:

Полагаю, что всё из-за этого ворнинга, но исправить его не удаётся

src/index.js

import SignUp from './components/SignUp';
import SignIn from './components/SignIn';
import Admin from './components/Admin';
import Main from './components/Main';
import Reducers from './reducers';
import authGuard from './components/HOCs/authGuard';
const jwt = localStorage.getItem('JWT');
axios.defaults.headers.common['Authorization'] = jwt;
ReactDOM.render(
    <Provider store = {createStore(Reducers, {
        auth: {
            token: jwt,
            isAuthenticated: jwt ? true : false
        }
    }, applyMiddleware(reduxThunk))}>
        <BrowserRouter>
            <App> 
                <Route exact path = '/' component = { Main } />
                <Route exact path = '/admin' component = { authGuard(Admin) } />
                <Route exact path = '/admin/signIn' component = { SignIn } />
                <Route exact path = '/signUp' component = { SignUp } />
            </App>
        </BrowserRouter>
    </Provider>, 
document.querySelector('#root'))
serviceWorker.unregister();

authGuard.js:

import React, { Component } from 'react';
import { connect } from 'react-redux';
export default (OriginalComponent) => {
    class MixedComponent extends Component {
        checkAuth() {
            if(!this.props.isAuth && !this.props.jwt) {
                console.log(this.props.history)
                this.props.history.push('/admin/signIn'); //а вот и он
            }
        }
        componentDidMount() {
            this.checkAuth();
        }
        componentDidUpdate() {
            this.checkAuth();
        }

        render() {
            return <OriginalComponent {...this.props}/>;
        }
    }
    function mapStateToProps(state) {
        return {
            isAuth: state.auth.isAuthenticated,
            jwt: state.auth.token
        }
    }
    return connect(mapStateToProps)(MixedComponent);
}

component/Admin.js:

class Admin extends Component {
    constructor(props) {
        super(props);
        this.state = {   
        }
    }
    render() {
        const { handleSubmit } = this.props;
        return(<div></div>);
    }
}
function mapStateToProps(state) {
    return state;
}
export default compose(
    connect(mapStateToProps, actions),
    reduxForm({form: 'admin'})
)(Admin);
Answer 1

Надо передать роутеру объект browserHistory в src/index.js

...
import {createBrowserHistory} from 'history';
...
const browserHistory = createBrowserHistory();
...
<BrowserRouter
    history={browserHistory}
>
...
READ ALSO
JQuery. Показывать и скрывать блоки по кругу

JQuery. Показывать и скрывать блоки по кругу

У меня есть 6 блоков divИзначально они скрыты

299
Как переопределить клик внутри ссылки?

Как переопределить клик внутри ссылки?

Есть ссылка, и внутри ссылки текстКак сделать так, чтобы при клике на спан ссылка не открывалась, а выполнялась JS-функция?

151
Какая структура конструктора в Jquery правильная

Какая структура конструктора в Jquery правильная

Объясните чем отличаются две структуры и какую лучше использовать в проектах?

168
Как открыть приложение Яндекс.Карты при клике на ссылку в Android?

Как открыть приложение Яндекс.Карты при клике на ссылку в Android?

Как сделать, чтобы при нажатии на ссылку в браузере открывалось приложение ЯндексКарты, с местом навигации (координаты)?

195