TypeError: невозможно прочитать историю свойства undefined

Я пытаюсь перенаправить пользователя на страницу входа в систему при попадании в маршрут / logout. Auth работает (токен jwt удален, но приложение не может перенаправить на / login.

Также, если я сделаю это /, приложение тоже вылетит.

На маршруте входа, который я использую withRouter из пакета response-router-dom, я могу получить доступ к this.props.history.push('/redirect_to_a_new_path'), но когда я пытаюсь обернуть компонент приложения методом withRouter, он также вылетает.

Пожалуйста помоги!

Вот репозиторий github:

App.js

import React, { Component } from "react";
import {
  BrowserRouter as Router,
  Route,
  Switch,
  withRouter
} from "react-router-dom";
import MuiThemeProvider from "material-ui/styles/MuiThemeProvider";
import lightBaseTheme from "material-ui/styles/baseThemes/lightBaseTheme";
import getMuiTheme from "material-ui/styles/getMuiTheme";
import injectTapEventPlugin from "react-tap-event-plugin";

// Components
import Navbar from "./components/Navbar";
import HomePage from "./components/HomePage";
import SpotMap from "./components/SpotMap";
import SignUpPage from "./components/containers/SignUpPage";
import LoginPage from "./components/containers/LoginPage";
import DashboardPage from "./components/containers/DashBoardPage";
import NotFound from "./components/NoteFound";
import Auth from "./modules/Auth";
import "./styles/App.css";

injectTapEventPlugin();

const handleLogout = event => {
  Auth.deauthenticateUser();
  this.props.history.push("/login");
};

const isLoggedIn = event => {
  if (Auth.isUserAuthenticated()) {
    this.props.history.push(DashboardPage);
  } else {
    this.props.history.push(HomePage);
  }
};

class App extends Component {
  render() {
    return (
      <MuiThemeProvider muiTheme={getMuiTheme(lightBaseTheme)}>
        <Router>
          <div>
            <Navbar />
            <Switch>
              <Route exact path="/" component={isLoggedIn} />
              <Route path="/spotmap" component={SpotMap} />
              <Route path="/dashboard" component={DashboardPage} />
              <Route path="/signup" component={SignUpPage} />
              <Route path="/login" component={LoginPage} />
              <Route path="/logout" component={handleLogout} />
              <Route component={NotFound} />
            </Switch>
          </div>
        </Router>
      </MuiThemeProvider>
    );
  }
}

export default App;

Это написано на React Router v3, и это то, что мне нужно преобразовать в React Router V4. Мне не подходят маршруты / и выхода из системы.

import Base from './components/Base.jsx';
import HomePage from './components/HomePage.jsx';
import DashboardPage from './containers/DashboardPage.jsx';
import LoginPage from './containers/LoginPage.jsx';
import SignUpPage from './containers/SignUpPage.jsx';
import Auth from './modules/Auth';


const routes = {
  // base component (wrapper for the whole application).
  component: Base,
  childRoutes: [

    {
      path: '/',
      getComponent: (location, callback) => {
        if (Auth.isUserAuthenticated()) {
          callback(null, DashboardPage);
        } else {
          callback(null, HomePage);
        }
      }
    },

    {
      path: '/login',
      component: LoginPage
    },

    {
      path: '/signup',
      component: SignUpPage
    },

    {
      path: '/logout',
      onEnter: (nextState, replace) => {
        Auth.deauthenticateUser();

        // change the current URL to /
        replace('/');
      }
    }

  ]
};

export default routes;

person Isak La Fleur    schedule 25.08.2017    source источник
comment
не могли бы вы включить ошибку?   -  person Edgar Henriquez    schedule 26.08.2017
comment
Привет @ edgaromar90! Ошибка: TypeError: невозможно прочитать "историю" свойства undefined. Я получаю это, потому что я не включил withRouter из пакета response-router-dom, но я не знаю, как включить его здесь, в модуль приложения с маршрутами там ..   -  person Isak La Fleur    schedule 26.08.2017
comment
TypeError: не удается прочитать "историю" свойства неопределенного isLoggedIn src / App.js: 35 32 | если (Auth.isUserAuthenticated ()) {33 | this.props.history.push (DashboardPage); 34 | } еще {›35 | this.props.history.push (Домашняя страница); 36 | } 37 | }; 38 |   -  person Isak La Fleur    schedule 26.08.2017
comment
Вы можете это попробовать? <Route exact path="/" render={() => {if (Auth.isUserAuthenticated()) { (<DashboardPage)/>)} else {(<HomePage/>)}}} />   -  person Edgar Henriquez    schedule 26.08.2017
comment
Это решило ошибку / route! Не могли бы вы рассказать, как я могу решить проблему перенаправления на / login после выхода из системы? Спасибо!!   -  person Isak La Fleur    schedule 26.08.2017
comment
Конечно! Добавлю в Ответ!   -  person Edgar Henriquez    schedule 26.08.2017


Ответы (2)


Для маршрута / вы должны использовать рендеринг следующим образом:

<Route exact path="/" render={() => {
  if (Auth.isUserAuthenticated()) { 
    (<DashboardPage)/>)
  } else {
    (<HomePage/>)
  }
}} />

Для вашего /logout маршрута с использованием <Redirect>

<Route path="/logout" render={() => {
    Auth.deauthenticateUser();
    return <Redirect to={{ pathname: "/login" }} />;
    }}
/>
person Edgar Henriquez    schedule 26.08.2017
comment
Если проблема не исчезнет, ​​дайте мне знать, и я смогу вам помочь. - person Edgar Henriquez; 26.08.2017
comment
Привет, @ edgaromar90! Я добавил код для пути / logout: ‹Путь маршрута = / logout render = {history =› {Auth.deauthenticateUser () && history.push (/); }} / ›Я получаю эту ошибку: Route.render (): должен быть возвращен действительный элемент React (или null). Возможно, вы вернули undefined, массив или другой недопустимый объект. - person Isak La Fleur; 26.08.2017
comment
В этом ответе они используют метод withRouter. Что-нибудь я могу использовать? Пожалуйста, дайте мне знать, если вы можете помочь нам решить проблему выхода из системы. stackoverflow .com / questions / 42701129 / - person Isak La Fleur; 26.08.2017
comment
Исправлено с помощью redirect @IsakLaFleur - person Edgar Henriquez; 26.08.2017
comment
Спасибо @ edgaromar90! Я также опубликовал альтернативное решение, которое я только что попробовал использовать withRouter. Я дал вам лучший ответ, так как вы были очень любезны !! - person Isak La Fleur; 26.08.2017

Я публикую второе решение для пути / logout, используя withRouter и this.props.history.push ('/ login').

  1. Укажите маршрут / logout на его собственный компонент «Выход».
  2. оберните компонент Logout методом withRouter из react-router-dom.

Logout.js

import React, { Component } from "react";
import Auth from "../modules/Auth";
import { withRouter } from "react-router-dom";

class Logout extends Component {
  constructor(props) {
    super(props);
    this.handleLogout = this.handleLogout.bind(this);
  }
  handleLogout() {
    Auth.deauthenticateUser();
    this.props.history.push("/login");
  }
  render() {
    return (
      <div>
        {this.handleLogout()}
      </div>
    );
  }
}
export default withRouter(Logout);
person Isak La Fleur    schedule 26.08.2017