如何在ReactJS的页面加载中加载组件？

Question

我有一个React JS组件正在尝试在用户登录后加载到页面中。此安全页面包含选项卡，单击这些选项卡后，将从选项卡各自组件中加载内容。 当前，在单击选项卡时将加载主要组件，但是我尝试在用户登录后也自动加载该主要页面。

这是母版页背后的代码：

import React, { Component } from 'react';
import './App.css';
import AuthService from './components/AuthService';
import withAuth from './components/withAuth';
import Footer from './components/Footer';
import Navigation from './components/Navigation';

import {
  Route,
  NavLink,
  HashRouter
} from "react-router-dom";

import Main from './components/Main';
import Catalog from './components/Catalog ';
import Calendar from './components/Calendar';

const Auth = new AuthService();

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
           <div className="App-title"><h2>Catalog</h2></div>
           <div>
              <p className="App-logout">
                  <button type="button" className="form-submit" onClick={this.handleLogout.bind(this)}>Logout</button>
              </p>
          </div>
        </div>
        <div className="App-divider"></div>
        <div>
            <Navigation />
        </div>
        <div className="App-content">
        <HashRouter>
            <Route exact path="/main" component={Main} />
          </HashRouter>
        <HashRouter>
          <Route path="/catalog" component={Catalog} />
        </HashRouter>
        <HashRouter>
          <Route path="/calendar" component={Calendar} />
        </HashRouter>

        </div>
        <div>
        <Footer />
        </div>
      </div>
    );
  }

  handleLogout() {
    Auth.logout()
    this.props.history.replace('/login');
 }

}

export default withAuth(App);

React JS还是一个新手，我可以在这方面得到一些帮助吗？ ...谢谢

Answer 1

您可能应该将未经身份验证的视图和经过身份验证的视图分开。

有一个登录页面，其中存储了您想要的身份验证凭据（redux，本地，cookie等），然后创建仅在用户获得身份验证后才显示的路由...

  <Route exact path="/login" component={() => !this.props.auth ? <LoginPage /> : <Redirect to="/HomePage" />} 
  />

//您还可以使用！this.state.auth或用于处理auth的任何其他变量。