React Router и customHistory pu sh не отрисовывают новый компонент

Question

Я использую Router и customHistory, чтобы помочь мне перенаправить страницы, но страницы отображаются некорректно.

Код работает следующим образом: если пользователь авторизован или авторизован, то пользователь должен быть перенаправлен на «localhost: 8080 / dashboard» и увидеть панель (с извлечением данных из firebase) и заголовок; если используется выход из системы, то пользователь должен быть перенаправлен на «locahost: 8080 /» и увидеть кнопку входа в систему с заголовком.

Однако после успешного входа в систему URL будет «localhost: 8080 / dashboard "без каких-либо данных, полученных из firebase, я вижу только заголовок и кнопку входа в систему. Но если я нажму «ВОЗВРАТ» с текущим URL-адресом «localhost: 8080 / dashboard», он будет перенаправлен на правильную страницу со всеми данными, полученными из firebase, и без кнопки входа в систему.

Это github_link к коду. Я потратил время на поиск в Интернете, но не нашел никаких положительных результатов, кроме этого . После прочтения stackoverflow я чувствую, что у моего кода есть проблемы с асинхронизацией. Есть мысли?

Я очень признателен за вашу помощь! Спасибо!

Это мой AppRouter. js:

export const customHistory = createBrowserHistory();
const AppRouter = () => (
  <Router history={customHistory}>
    <div>
      <Header />
      <Switch>
        <Route path="/" exact component={LoginPage} />
        <Route path="/dashboard" component={ExpenseDashboardPage} />
        <Route path="/create" component={AddExpensePage} />
        <Route path="/edit/:id" component={EditExpensePage} />
        <Route path="/help" component={HelpPage} />
        <Route component={LoginPage} />
      </Switch>
    </div>
  </Router>
);

Это мое приложение. js

import React, { Children } from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";

import "normalize.css/normalize.css"; //Normalize.css makes browsers render all elements more consistently and in line with modern standards.
import "./styles/styles.scss";
import AppRouter, { customHistory } from "./routers/AppRouter";
import configureStore from "./redux/store/configStore";
import { startSetExpenses } from "./redux/actions/expenses";
import { login, logout } from "./redux/actions/auth";

import "react-dates/lib/css/_datepicker.css";
import { firebase } from "./firebase/firebase";
//for testing: npm test -- --watch

const store = configureStore();
const jsx = (
  <Provider store={store}>
    <AppRouter />
  </Provider>
);

ReactDOM.render(<p>Loading...</p>, document.getElementById("app"));

let hasRendered = false;
const renderApp = () => {
  if (!hasRendered) {
    ReactDOM.render(jsx, document.getElementById("app"));
    hasRendered = true;
  }
};

firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    console.log("log in");
    store.dispatch(login(user.uid));
    store.dispatch(startSetExpenses()).then(() => {
      renderApp();
      if (customHistory.location.pathname === "/") {
        customHistory.push("/dashboard");
      }
    });
  } else {
    console.log("log out");
    store.dispatch(logout());
    renderApp();
    customHistory.push("/");
  }
});

Это заголовок. js

import React from "react";
import { BrowserRouter, Route, Switch, Link, NavLink } from "react-router-dom";
import { connect } from "react-redux";
import { startLogout } from "../redux/actions/auth";

export const Header = ({ startLogout }) => (
  <header>
    <h1>Expensify</h1>
    <NavLink to="/" activeClassName="is-active">
      Dashboard
    </NavLink>
    <NavLink to="/create" activeClassName="is-active">
      CreateExpense
    </NavLink>
    <button onClick={startLogout}>Logout</button>
  </header>
);

const mapDispatchToProps = (dispatch) => ({
  startLogout: () => dispatch(startLogout()),
});

export default connect(undefined, mapDispatchToProps)(Header);