在本地存储加载页面时发生的反应重定向

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;