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;一旦我在控制台日志上写下它，表示我这是“未发现的”。我的想法是，如果会话已经开始（即它在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：

没有保存所需的组件，因此编辑时显示错误。

@palsrealm提供的答案解决了我的问题。

Answer 1

像

一样进行对象解构

const {redirect} = this.state;

您需要在redirect对象中设置state密钥。事实并非如此。或者你的意思是写

const redirect = this.state;

Answer 2

您可以使用render Route方法根据您的逻辑显示组件。像

这样的东西

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

当你做

时获得undefined的原因

const { redirect } = this.state;

您未在构造函数中的redirect对象中定义state。

To add a variable至localstorage您需要致电

localStorage.setItem(key,value);

将标识为value的对象key添加到localstorage中。你需要To access this item

let item = localStorage.getItem(key);

使用localstorage在页面加载时反映重定向

2 个答案: