0

如果用户登录并尝试转到登录页面或任何未处理的路由，我正在尝试让页面路由到主页。我尝试制作一个呈现登录页面或使用“window.location.replace('/')”的函数。我也在登陆页面的 componentDidMount 中尝试过这个。它重定向到主页，但随后在开发工具中显示了我的反应组件的两个实例。最接近答案的是，这是一个我不相信的反应错误，以及关于 shouldComponentUpdate 的一些东西。我无法让它发挥作用。我在下面包含了代码。谢谢您的帮助。是因为我在最终路线中使用了渲染吗？

之前 - 1 个应用程序组件
之后 - 2 个应用程序组件

我的主应用程序容器

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
// import logo from './logo.svg';
// import './App.css';
import SiteNav from './components/SiteNav';
import Landing from './pages/Landing';
import Home from './pages/Home';
import { authUtils } from './utils/api';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoggedIn: false,
      user: {}
    };
  }

  componentDidMount() {
    if(this.isUserLoggedIn()){
      authUtils.getLoggedInUser()
      .then(result => {
        this.setState({isLoggedIn: true, user: result.data.user})
      });
    }
  }

  isUserLoggedIn = () => {
    return localStorage.getItem('jwtToken') ? true : false;
  }

  onLogin = (username, password) => {
    authUtils.loginUser(username, password)
    .then(result => {
      localStorage.setItem('jwtToken', result.data.token);
      // this.setState({isLoggedIn: true, user: result.data.user});
      window.location.replace('/');
    });
  }

  onRegister = (username, email, password) => {
    authUtils.registerUser(username, email, password)
    .then(result => {
      this.onLogin(username, password);
    });
  }

  renderLandingPage = () => {
    if (this.isUserLoggedIn()){
      window.location.replace('/');
    } else{
      return <Landing onLogin={this.onLogin} onRegister={this.onRegister} />
    }
  }

  render() {
    return (
      <Router>
        <div>
        {/* <SiteNav isLoggedIn={this.state.isLoggedIn} user={this.state.user} /> */}
          <Switch>
            <Route exact path="/" component={Home} />>
            <Route path="/*" render={this.renderLandingPage} />
          </Switch>
        </div>
      </Router>
    );
  }
}

export default App;
4

1 回答 1

0

所以我找到了解决方案。我仍然不知道为什么 window.location.replace 会这样做，但我现在正在返回一个重定向组件。

老的

renderLandingPage = () => {
    if (this.isUserLoggedIn()){
      window.location.replace('/');
    } else{
      return <Landing onLogin={this.onLogin} onRegister={this.onRegister} />
    }
  }

新的

renderLandingPage = () => {
    if (this.isUserLoggedIn()){
      return <Redirect to="/" />
    } else{
      return <Landing onLogin={this.onLogin} onRegister={this.onRegister} />
    }
  }
于 2018-06-15T11:29:28.247 回答