ローカルリージョナルによるページリダイレクトへのリダイレクト

Question

私は他の種類のリダイレクトのためにさまざまな方法を見つけましたが、私はこれを援助するものを見つけませんでした。

私はlocalstorageにsessionID変数を保存する必要があります。ユーザーがアプリケーションにログインしているかどうかを判断するためにこれを使用して、対応するページにリダイレクトできるようにします。しかし、私はそうすることができませんでした。ここに私のコードは、これまでのところです：

import React, { Component } from 'react'; 
import './App.css'; 
import Header from './components/Header/Header'; 
import Footer from './components/Footer/Footer'; 
import Home from './components/Home/Home'; 
import VideoGrid from './components/VideoGrid/VideoGrid' 
import { Route, Redirect } from 'react-router-dom'; 


class App extends Component { 

    constructor(props){ 
    super(props); 
    this.state = {sessionID: "-2", sendToGrid: false}; 
    } 

    componentDidMount() { 
    if(this.state.sessionID === "-1"){ 
     console.log("session is not started"); 
     console.log(this.state.sendToGrid); 
    } else { 
     console.log("session has started"); 
     this.setState({ sendToGrid: true }); 
     console.log(this.state.sendToGrid); 
    } 
    } 

    render() { 

    const { redirect } = this.state; 

    console.log("must be sent to grid: " + redirect.sendToGrid); 

    var landingPage; 

    if(redirect.sendToGrid){ 
     landingPage = <Home /> 
    } else { 
     landingPage = <VideoGrid /> 
    } 

    return (
     <div className="App"> 
     <Header /> 

      <Route exact={true} path="/" component={Home} /> 
      <Route path="/videogrid" component={VideoGrid} /> 

      {landingPage} 

     <Footer /> 
     </div> 
    ); 
    } 
} 

export default App; 

（誰かがどのように私はそれを感謝したいことをやるために私に言うことができるならば）私はのlocalStorage変数を追加していないが、私は今のプレースホルダとして焦げた文字列を使用しています。だから私の考えは、componentDidMount()がセッションが開始されたかどうかをレンダリングするように私の状態を変えてしまったのですが、const { redirect } = this.state;をコンソールログに書き込むと、私はそれが "undefinded"であることを示しています。私の考えは、セッションが開始されている（つまり、localStorageに設定され、 "-1"に設定されていない）場合、ホームページ（ログインフォームを持つ）ではなくVideoGridページが表示されるはずです。

ご協力いただければ幸いです。

EDIT：

私はこのように私のコードを編集した：

import React, { Component } from 'react'; 
import './App.css'; 
import Header from './components/Header/Header'; 
import Footer from './components/Footer/Footer'; 
import Home from './components/Home/Home'; 
import VideoGrid from './components/VideoGrid/VideoGrid' 
import { Route, Redirect } from 'react-router-dom'; 


class App extends Component { 

    constructor(props){ 
    super(props); 
    this.state = {sessionID: "-2", sendToGrid: false}; 
    } 



    componentWillMount() { 
    if(this.state.sessionID === "-1"){ 
     console.log("session is not started"); 
     console.log(this.state.sendToGrid); 
    } else { 
     console.log("session has started"); 
     this.setState({ sendToGrid: true }); 
     console.log(this.state.sendToGrid); 
     console.log(this.state); 
    } 
    } 

    componentDidMount() { 
    if(this.state.sessionID === "-1"){ 
     console.log("session is not started"); 
     console.log(this.state.sendToGrid); 
    } else { 
     console.log("session has started"); 
     console.log(this.state.sendToGrid); 
     console.log(this.state); 
    } 
    } 

    render() { 

    return (
     <div className="App"> 
     <Header /> 

      <Route exact={true} path="/" render={(props) => { 
      if(this.state.sessionID === "-1") 
       return <Home />; 
      else 
       return <VideoGrid />; 
      }} /> 
      <Route path="/videogrid" component={VideoGrid} /> 



     <Footer /> 
     </div> 
    ); 
    } 
} 

export default App; 

そして、私は次のエラーを取得しています：

EDIT 2：

HADN必要なコンポーネントを保存していないため、エラーが表示されますn編集します。

@palsrealmからの回答が私の問題を解決しました。あなたはstateオブジェクトでredirectキーを持っている必要があり

const {redirect} = this.state; 

のような構造化代入オブジェクトを行うには

Answer 1

を書き込むことが意味しました。

<Route exact={true} path="/" 
     render={(props)=>{ 
      if(this.state.sessionID ==="-1") return <Home/>; 
      else return <VideoGrid/>; 
}} /> 

のようなものは、あなたが

const { redirect } = this.state; 

を行うときにundefinedを得ている理由は、コンストラクタであなたのstateオブジェクトにredirectを定義していないということです。 localstorageへ

To add a variableあなたはあなたのlocalStorageに、id keyでオブジェクトvalueを追加する

localStorage.setItem(key,value); 

を呼び出す必要があります。To access this itemあなたはあなたの答えに続き

let item = localStorage.getItem(key); 

Answer 2

。そうではありません。それとも、ただあなたのロジックに基づいてコンポーネントを表示するためにRouteのrender方法を使用することができます

const redirect = this.state;