Реагируйте Devtools, показывая, что компонент визуализируется дважды

Question

Я пытаюсь заставить страницу перенаправиться на домашнюю страницу, если пользователь вошел в систему и пытается перейти на страницу входа или любой другой маршрут, который не обрабатывается. Я попытался сделать функцию, которая либо отображает страницу входа, либо использует "window.location.replace('/')". Я также попробовал это в componentDidMount для целевой страницы. Он перенаправляет на домашнюю страницу, но затем в инструментах разработчика он показывает два экземпляра моего компонента реакции. Наиболее близким ответом является то, что это ошибка реагирования, в которую я не верю, и кое-что о shouldComponentUpdate. Я не смог заставить это работать. Я включил код ниже. Спасибо за помощь. Это потому, что я использую рендер на последнем маршруте?

До - 1 компонент приложения
После - 2 компонента приложения

Контейнер My Main App

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} />
    }
  }