покажи страницу входа на секунду при маршрутизации других страниц reactJS

Question

Я использую это видео https://www.youtube.com/watch?v=r4EsP6rovwk&t=1s, чтобы создать Auth для моего сайта, я в основном скопировал его код, единственное изменение заключается в том, что я маршрутизирую после успешного входа на другую страницу.

проблема в том, что после входа отображается моя домашняя страница, но когда я нажимаю кнопки для маршрутизации на другие страницы, перед тем, как отображается другая страница, я на секунду вижу страницу входа.

это код auth - я считаю, что это связано с проблемой (до этого мой веб-сайт работал хорошо).

Редактировать: я пытаюсь выяснить, в чем проблема, и я заметил, что когда я использую ссылку, все хорошо , но при использовании href есть проблема. (И это то, что я сделал на своем сайте). Итак ... кто-нибудь знает, почему href делает эту проблему?

app. js

import React, { Component } from 'react';
import fire from './Fire';
import SearchAppBar from '../components/appBar';
import Login from './login';


class App extends Component {
  constructor() {
    super();
    this.state = ({
      user: null,
    });
    this.authListener = this.authListener.bind(this);
  }

  componentDidMount() {
    this.authListener();
  }

  authListener() {
    fire.auth().onAuthStateChanged((user) => {
      if (user) {
        this.setState({ user });
      } else {
        this.setState({ user: null });
      }
    });
  }
  render() {
    return (
     <div>{this.state.user ? ( <SearchAppBar/>) : (<Login />)}</div>)
}
}

export default App;

login. js:

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import fire from './Fire';

class Login extends Component {
  constructor(props) {
    super(props);
    this.login = this.login.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.signup = this.signup.bind(this);
    this.state = {
      email: '',
      password: ''
    };
  }

  handleChange(e) {
    this.setState({ [e.target.name]: e.target.value });
  }

  login(e) {
    e.preventDefault();
    fire.auth().signInWithEmailAndPassword(this.state.email, this.state.password).then((u)=>{
    }).catch((error) => {
        console.log(error);
      });
  }

  signup(e){
    e.preventDefault();
    fire.auth().createUserWithEmailAndPassword(this.state.email, this.state.password).then((u)=>{
    }).then((u)=>{console.log(u)})
    .catch((error) => {
        console.log(error);
      })
  }
  render() {
    return (
       <div className="col-md-6">
       <form>
      <div class="form-group">
       <label for="exampleInputEmail1">Email address</label>
       <input value={this.state.email} onChange={this.handleChange} type="email" name="email" 
       class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter 
       email" />
       <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else. 
       </small>
      </div>
       <div class="form-group">
      <label for="exampleInputPassword1">Password</label>
      <input value={this.state.password} onChange={this.handleChange} type="password" name="password" 
       class="form-control" id="exampleInputPassword1" placeholder="Password" />
      </div>
      <button type="submit" onClick={this.login} className="btn btn-primary">Login</button>
      <button onClick={this.signup} style={{marginLeft: '25px'}} className="btn btn- 
       success">Signup</button>
       </form>

 </div>
    );
  }
}
export default Login;

Спасибо все ребята !!