React Router项目中点击登录需跳转新页面而非同页渲染问题求助

看你的代码，当前直接导入并渲染App组件的方式，会导致内容直接出现在当前登录页面里。要实现跳转新页面的效果，得利用React Router的路由导航能力，下面是具体的调整方案：

1. 先梳理路由的基础结构 #

首先确保项目的路由入口（比如index.js）配置正确，把登录组件和App组件设为不同路径对应的页面，而不是在登录组件里直接渲染App：

// 示例：index.js 路由入口配置
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, browserHistory } from 'react-router';
import Login from './components/Login'; // 你的登录组件文件路径
import App from './App';

ReactDOM.render(
  <Router history={browserHistory}>
    <Route path="/" component={Login} /> {/* 登录页面路径 */}
    <Route path="/app" component={App} /> {/* App页面路径 */}
  </Router>,
  document.getElementById('root')
);

2. 在登录组件里实现跳转逻辑 #

移除直接导入App的代码，改用React Router的导航方法，在登录成功后跳转到/app路径：

方式一：用browserHistory.push（适配你当前的旧版React Router） #

修改你的登录组件代码：

import React, { Component } from 'react';
import * as service from '../services/service';
import '../App.css'
import '../index.css'
// 删掉 import App from '../App' 这句
import { browserHistory } from 'react-router';

class Login extends Component {
  handleLogin = async () => {
    // 先执行你的登录业务逻辑，比如调用登录接口
    const isLoginSuccess = await service.login(); // 假设这是你的登录请求方法
    
    if (isLoginSuccess) {
      // 登录成功后跳转至App页面
      browserHistory.push('/app');
    }
  }

  render() {
    return (
      <div className="login-container">
        {/* 这里放你的登录表单内容 */}
        <button onClick={this.handleLogin}>登录</button>
      </div>
    );
  }
}

export default Login;

方式二：用组件接收的history props #

如果你的登录组件已经被Route包裹（像上面index.js的配置那样），组件会自动拿到history属性，也可以这样写：

handleLogin = async () => {
  const isLoginSuccess = await service.login();
  if (isLoginSuccess) {
    this.props.history.push('/app');
  }
}

3. 额外注意点 #

• 你当前用的是旧版（v3）React Router的API，如果后续升级到v4/v5版本，要改用BrowserRouter替代Router，获取history的方式也会变化——函数组件可以用useHistory钩子，类组件可以用withRouter高阶组件。
• 核心原则是：让路由来管理不同路径的页面渲染，不要在组件里直接渲染另一个页面组件，这样才能实现真正的页面跳转效果。

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