在本地存儲加載頁面時發生的反應重定向

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()被執行，我會改變我的狀態來告訴渲染會話是否已經開始，但是，一旦我將它寫在控制檯日誌上，就表明它是「未找到的」。我的想法是，如果會話已經開始（即它在localStorage上設置，並且未設置爲「-1」），則應該顯示VideoGrid頁面而不是主頁（具有登錄表單）。

任何幫助將不勝感激！

編輯：

我編輯了我這樣的代碼：

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; 

而且我發現了以下錯誤：

編輯2：

Hadn沒有保存所需的組件，因此顯示錯誤o編輯。

@palsrealm提供的答案解決了我的問題。

Answer 1

您可以使用Route的render方法讓系統根據您的邏輯組件。像

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

的原因是你越來越undefined當你做

const { redirect } = this.state; 

是，你有沒有在你的構造對象state定義redirect。

To add a variable到localstorage你需要調用

localStorage.setItem(key,value); 

與ID key添加對象value到您的localStorage。To access this item你需要

let item = localStorage.getItem(key); 

Answer 2

要做到對象解構像

const {redirect} = this.state; 

，你需要在你的state對象redirect關鍵。事實並非如此。還是你的意思，只是寫

const redirect = this.state;