Javascript react.js如何在启动某些操作时重新启动App.js

我已经创建了一个带有标题和简单授权的简单react.js，因此，如果用户登录（用户对象在localstorage中设置）-导航栏显示，如果没有-导航栏隐藏。代码如下：

#App.js
import React from 'react';
import { connect } from 'react-redux';
import LoginPage from "./components/loginPage/loginPage";
import MainPage from "./components/dashboard/mainPage";
import AuditPage from "./components/auditPage/AuditPage.js";
import Navbar from "./components/navbar/Navbar";
import Test01 from "./components/dev/test01";
import Test02 from "./components/dev/test02";
import {Router, Route, BrowserRouter, Redirect, Switch} from 'react-router-dom';
import {history} from "./helpers/history";
import TestsNav from "./components/dev/TestsNav";


class App extends React.Component   {
  constructor(props){
    super(props);
  }
  render() {

    return (
        <div className="main-container">
            <Router history={history}>
                {localStorage.getItem('user') && (//this fires only once, when the page is loaded
                    <Navbar history={history} />
                )}

                <Switch>
                    <Route exact path="/login" component={LoginPage}/>
                    <Route exact path="/" component={MainPage}/>
                    <Route exact path="/audit" component={AuditPage}/>
                    <Route exact path="/test01" component={Test01}/>
                    <Route exact path="/test02" component={Test02}/>
                </Switch>
            </Router>
        </div>
    )
  }
}

function mapStateToProps(state) {
  return {
   };
}

const connectedApp = connect(mapStateToProps)(App);
export default connectedApp;

#App.js
从“React”导入React；
从'react redux'导入{connect}；
从“/components/LoginPage/LoginPage”导入LoginPage；
从“/components/dashboard/MainPage”导入主页面；
从“/components/AuditPage/AuditPage.js”导入AuditPage；
从“/components/Navbar/Navbar”导入导航栏；
从“/components/dev/Test01”导入Test01；
从“/components/dev/Test02”导入Test02；
从“react Router dom”导入{Router，Route，BrowserRouter，Redirect，Switch}；
从“/helpers/history”导入{history}”；
从“/components/dev/TestsNav”导入TestsNav；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
{localStorage.getItem（'user'）&&（//当加载页面时，仅触发一次
)}
)
}
}
函数MapStateTops（状态）{
返回{
};
}
const connectedApp=connect（mapStateToProps）（应用程序）；
导出默认connectedApp；

---

问题是，当用户登录并将数据设置为localstorage时-导航栏不显示-class App.js不会重新提交。我为navbar设置了一个呈现条件，但在加载页面时，它只触发一次。所以，如果我想显示导航栏，我需要点击f5，然后它才会出现。任何关于如何修复它的想法都是受欢迎的。谢谢。

以下是我为这种情况所做的

我的路线部分：

<Router>
    <Switch>
    {privateRoutes.map(({ path, component: Component }, idx) => (
        <PrivateRoute
        key={idx}
        exact
        path={path}
        component={() => (
            <SideNav>
              <Component />
            </SideNav>
        )}
        />
    ))}

    <IsAuthenticated exact path="/login" component={LoginPage} />
    </Switch>
</Router>

---

我使用redux检查用户是否经过身份验证，并在应用程序启动时在App.js中进行检查。

以下是我针对这种情况所做的操作

我的路线部分：

<Router>
    <Switch>
    {privateRoutes.map(({ path, component: Component }, idx) => (
        <PrivateRoute
        key={idx}
        exact
        path={path}
        component={() => (
            <SideNav>
              <Component />
            </SideNav>
        )}
        />
    ))}

    <IsAuthenticated exact path="/login" component={LoginPage} />
    </Switch>
</Router>

---

我使用redux检查用户是否经过身份验证，并在应用程序启动时在App.js中进行检查。

将此组件中的函数传递到登录页面。登录后调用函数（该函数将设置状态并重新呈现组件）

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此状态={
I验证：错误
}
}
setIsAuthenticated=（isAuthenticated）=>this.setState（{isAuthenticated}）；
render（）{
返回(
{（this.state.isAuthenticated | | | localStorage.getItem（'user'））&&&（//当加载页面时，仅触发一次
)}
}/>
//登录后，从登录页调用props.setIsAuthenticated。
)
}
}
函数MapStateTops（状态）{
返回{
};
}
const connectedApp=connect（mapStateToProps）（应用程序）；
导出默认connectedApp；

将此组件中的函数传递到登录页面。登录后调用函数（该函数将设置状态并重新呈现组件）

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此状态={
I验证：错误
}
}
setIsAuthenticated=（isAuthenticated）=>this.setState（{isAuthenticated}）；
render（）{
返回(
{（this.state.isAuthenticated | | | localStorage.getItem（'user'））&&&（//当加载页面时，仅触发一次
)}
}/>
//登录后，从登录页调用props.setIsAuthenticated。
)
}
}
函数MapStateTops（状态）{
返回{
};
}
const connectedApp=connect（mapStateToProps）（应用程序）；
导出默认connectedApp；

尝试实现经过身份验证的路由。尝试实现经过身份验证的路由。

import React from "react";
import { Redirect, Route } from "react-router-dom";
import { useSelector } from "react-redux";

function PrivateRoute({ component: Component, ...props }) {
  const isAuthenticated = useSelector(state => state.User.isLogin);
  return (
    <Route
      render={props =>
        isAuthenticated ? (
          <Component {...props} />
        ) : (
          <Redirect
            to={{
              pathname: "/login",
              state: { from: props.location }
            }}
          />
        )
      }
      {...props}
    />
  );
}

export default PrivateRoute;

export const privateRoutes = [
  {
    path: "/",
    component: HomePage
  },
];

class App extends React.Component   {
  constructor(props){
    super(props);
    this,state = {
      isAuthenticated: false
    }
  }

  setIsAuthenticated = (isAuthenticated) => this.setState({ isAuthenticated });
  render() {

    return (
        <div className="main-container">
            <Router history={history}>
                {(this.state.isAuthenticated || localStorage.getItem('user')) && (//this fires only once, when the page is loaded
                    <Navbar history={history} />
                )}

                <Switch>
                    <Route exact path="/login" render={() => <LoginPage setIsAuthenticated={this.setIsAuthenticated} />}/>
// call props.setIsAuthenticated from login page after loginng in.
                    <Route exact path="/" component={MainPage}/>
                    <Route exact path="/audit" component={AuditPage}/>
                    <Route exact path="/test01" component={Test01}/>
                    <Route exact path="/test02" component={Test02}/>
                </Switch>
            </Router>
        </div>
    )
  }
}

function mapStateToProps(state) {
  return {
   };
}

const connectedApp = connect(mapStateToProps)(App);
export default connectedApp;