Question

如果用户登录并尝试进入登录页面或任何未处理的路径，我试图让页面路由到主页。我尝试过创建一个呈现登录页面或使用＆＃34; window.location.replace（＆＃39; /＆＃39;）＆＃34;的函数。我还在componentDidMount中尝试了这个登陆页面。它重定向到主页，但是在开发工具中它显示了我的反应组件的两个实例。最接近答案的是这是一个反应错误，我不相信，还有一些关于shouldComponentUpdate的内容。我无法让它发挥作用。我在下面提供了代码。谢谢您的帮助。是因为我在最后的路线中使用渲染吗？

Before - 1 app component
After - 2 app components

我的主应用容器

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;

Answer 1

所以我找到了解决方法。我仍然不知道为什么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} /> } }

React Devtools显示该组件被渲染两次

1 个答案: