如何在ReactJS用户登录后自动加载Main组件？

嘿，作为React新手碰到这个问题很正常，我来一步步帮你搞定！

首先看你当前代码里的几个小问题：

• 你用了三个独立的HashRouter，这完全没必要，React Router要求所有路由相关组件都放在同一个Router上下文里，多个Router会导致路由逻辑混乱。
• 登录后你的页面默认是根路径/，但你的Main组件只匹配/main，所以只有点击对应的NavLink跳转后才会加载。

下面是修改后的完整代码，我会标注关键修改点：

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';
// 别忘了引入Redirect组件
import { Route, NavLink, HashRouter, Redirect } 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">
          {/* 所有Route都放在同一个HashRouter里 */}
          <HashRouter>
            {/* 根路径自动重定向到/main，这样登录后直接加载Main */}
            <Route exact path="/" render={() => <Redirect to="/main" />} />
            <Route path="/main" component={Main} />
            <Route path="/catalog" component={Catalog} />
            <Route path="/calendar" component={Calendar} />
          </HashRouter>
        </div>
        <div>
          <Footer />
        </div>
      </div>
    );
  }

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

export default withAuth(App);

关键修改说明： #

1. 合并HashRouter：把所有<Route>都放到同一个<HashRouter>标签下，这样路由系统能正确管理路径匹配和组件渲染。
2. 添加默认重定向：新增了一个根路径/的Route，用render方法返回<Redirect to="/main"，这样当用户登录后进入安全页面（根路径）时，会自动跳转到/main，从而加载Main组件。
3. 修正组件导入：你原来的Catalog组件导入多了个空格，我帮你去掉了（import Catalog from './components/Catalog '; → import Catalog from './components/Catalog';），避免潜在的导入错误。

另外，如果你希望登录成功后直接跳转到/main，也可以在你的登录逻辑里（比如登录按钮的点击事件）添加this.props.history.push('/main')，这样和上面的重定向效果是一样的，选哪种都可以。

这样修改后，用户登录进入安全页面时，就会自动加载Main组件，不需要手动点击标签啦！

内容的提问来源于stack exchange，提问作者user1724708