Javascript React Router和customHistory推送不呈现新组件

我正在使用路由器和customHistory来帮助我重定向页面，但页面无法正确呈现

代码是这样工作的：如果用户获得授权或登录，则应将用户重定向到“localhost:8080/dashboard”，并查看仪表板（从firebase获取数据）&header；如果用户已注销，则应将用户重定向到“locahost:8080/”并查看带有标题的登录按钮

但是，在我成功登录后，url是“localhost:8080/dashboard”，没有从firebase获取任何数据，我只能看到标题和登录按钮。但如果我用当前url“localhost:8080/dashboard”点击“RETURN”，它将重定向到正确的页面，其中包含从firebase获取的所有数据，并且没有登录按钮

这是代码的第一步。 我花了很多时间在网上搜索，但除了一个以外没有找到任何积极的结果。在阅读stackoverflow之后，我觉得我的代码在异步方面有一些问题。有什么想法吗

我真的很感谢你的帮助！谢谢

这是我的approver.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>
);

export const customHistory=createBrowserHistory（）；
常量批准器=（）=>(
);

这是我的app.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("/");
  }
});

import React，{Children}来自“React”；
从“react dom”导入react dom；
从“react redux”导入{Provider}；
导入“normalize.css/normalize.css”//css使浏览器能够更一致地呈现所有元素，并符合现代标准。
导入“/styles/styles.scss”；
从“/routers/AppRouter”导入AppRouter，{customHistory}；
从“/redux/store/configStore”导入configureStore；
从“/redux/actions/expenses”导入{startSextPenses}”；
从“/redux/actions/auth”导入{login，logout}；
导入“react dates/lib/css/_datepicker.css”；
从“/firebase/firebase”导入{firebase}”；
//用于测试：npm测试--watch
const store=configureStore（）；
常数jsx=(
);
ReactDOM.render（加载…
，document.getElementById（“应用”））；
让hasprended=false；
常量renderApp=（）=>{
如果（！hasRendered）{
render（jsx，document.getElementById（“app”）；
hasprended=true；
}
};
firebase.auth（）.onAuthStateChanged（（用户）=>{
如果（用户）{
console.log（“登录”）；
store.dispatch（登录名（user.uid））；
store.dispatch（startsetextenses（））。然后（（）=>{
renderApp（）；
如果（customHistory.location.pathname==“/”）{
customHistory.push（“/dashboard”）；
}
});
}否则{
控制台日志（“注销”）；
store.dispatch（logout（））；
renderApp（）；
customHistory.push（“/”）；
}
});

这是header.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);

从“React”导入React；
从“react router dom”导入{BrowserRouter，Route，Switch，Link，NavLink}；
从“react redux”导入{connect}；
从“./redux/actions/auth”导入{startogout}；
导出常量头=（{startogout}）=>(
花费
仪表板
创造费用
注销
);
const mapDispatchToProps=（调度）=>({
startLogout:（）=>分派（startLogout（）），
});
导出默认连接（未定义，mapDispatchToProps）（标题）；