react.js 如何在触发某些操作时重新渲染 App.js答案

【问题标题】：react.js how to rerender App.js when some action is firedreact.js 如何在触发某些操作时重新渲染 App.js
【发布时间】：2020-03-25 13:25:42
【问题描述】：

我创建了一个带有标题和简单授权的简单 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;

问题是当用户登录并将数据设置为 localstorage - navbar 不显示 - 类 App.js 没有重新呈现。我得到了导航栏的渲染条件 - 但它只在页面加载时触发一次。因此，如果我想显示导航栏，我需要按 f5，然后才会出现。欢迎任何如何解决它的想法。谢谢。

【问题讨论】：

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

标签： javascript reactjs

【解决方案1】：

这是我针对这种情况所做的。

我的路线部分：

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

IsAuthenticated 组件：

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


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

export default IsAuthenticated;

privateRoutes 组件：

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
  },
];

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

【讨论】：

【解决方案2】：

从这个组件传递一个函数到登录页面。登录后调用该函数（它将设置状态并重新渲染组件）。

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;

【讨论】：

【解决方案3】：

这很容易。在 App.js 中，调用一个函数 return App;

【讨论】：