Как я могу получить history.push () внутри componentDidMount? - PullRequest
Новая
       10

Как я могу получить history.push () внутри componentDidMount?

0 голосов
/ 15 октября 2019

Я пробовал это в течение нескольких часов, и я не уверен, что я делаю неправильно, но у меня есть этот маршрут Auth, пытающийся выполнить некоторую базовую проверку JWT, и я получаю this.props.history, неопределенный внутри моегоМетод componentDidMount. Это мой компонент Auth. 

import React, { Component } from 'react';
import { getJwt } from '../helpers/jwt';
import axios from 'axios';
import { withRouter } from 'react-router-dom';

class Auth extends Component {

    constructor(props) {
        super(props)
        this.state = {
            user: undefined
        }
    }

    componentDidMount() {
        const jwt = getJwt();
        if (!jwt) {
            this.props.history.push('/login');
        }
        axios.get('/auth/getUser', { headers: { Authorization: `Bearer ${jwt}` } })
            .then(res => res.setState({
                user: res.data
            }))
            .catch(err => {
                localStorage.removeItem('jwt');
                this.props.push('/login')
            })
    }

    render() {
        if (this.state.user === undefined) {
            return (
                <h1>Loading...</h1>
            )
        }
        return (
            <div>
                {this.props.children}
            </div>
        );
    }
    }

export default withRouter(Auth);

Я пытаюсь выполнить базовую проверку этого маршрута.

Это мой App.js 

      <BrowserRouter>
    <React.Suspense fallback={loading()}>
      <Switch>
        <Route exact path="/login" name="Login Page" render={props => <Login {...props} />} />
        <Route exact path="/register" name="Register Page" render={props => <Register {...props} />} />
        <Route exact path="/404" name="Page 404" render={props => <Page404 {...props} />} />
        <Route exact path="/500" name="Page 500" render={props => <Page500 {...props} />} />
        <Auth>
          <Route path="/" name="Home" render={props => <DefaultLayout {...props} />} />
        </Auth>
      </Switch>
    </React.Suspense>
  </BrowserRouter>

Iесть обертка с авт. В основном проверяется, может ли пользователь ввести домашний маршрут.

...