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

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

有一个存储身份验证凭据的登录页面，无论你喜欢什么，（还原，本地，cookie等），然后创建一个只有在用户具有身份验证后显示的路线...

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

//您也可以使用！this.state.auth或您用来处理身份验证的任何其他变量。

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

1 个答案: