React中history.push('/')跳转后组件不渲染问题求助

嘿，我帮你排查到两个核心问题，修正后应该就能解决跳转后组件不更新的情况了：

1. 自定义History实例和路由组件不匹配 #

你在_helpers里手动创建了history实例，但App.jsx里用的BrowserRouter根本不接受外部传入的history参数——它会自己生成一个独立的history对象。这就导致你在登录成功后调用history.push('/')时，只是修改了地址栏，但路由组件完全没监听这个自定义的history实例，自然不会切换页面。

怎么改？ #

把App.jsx里的BrowserRouter换成react-router-dom提供的Router组件（不带Browser后缀的那个），它专门用来配合自定义history实例：

// App/App.jsx
...
// 替换导入语句
import { Router, Route, Redirect, Switch } from 'react-router-dom'
import { LoginPage } from '../LoginPage';
import { history } from '../_helpers';

function App() {
  // 这里一定要return JSX！你之前的代码漏掉了return，组件根本没输出内容
  return (
    <Router history={history}>
      <Switch>
        <Route exact={true} path="/" render={() => (
          <h1>Welcome</h1>
        )} />
        <Route path="/login" component={ LoginPage } />
        <Redirect from="*" to="/" />
      </Switch>
    </Router>
  )
}
export {App}

2. App组件忘记返回JSX了 #

看你原来的App.jsx，函数体里直接写了<Router>但没有return语句，这会导致组件无法渲染任何内容。上面的代码已经补上了return，用括号把整个路由结构包起来，确保组件能正确输出。

额外小检查 #

• 确认react-router-dom版本：如果是v6的话，Switch要换成Routes，Route的写法也得改成<Route path="/" element={<h1>Welcome</h1>}这种，但从你的代码风格看应该是v5，所以上面的修改没问题。
• 可以在userActions.jsx的then回调里加个console.log('登录成功，跳转中')，确认history.push('/')确实是在登录成功后执行的。

按上面的步骤改完，应该就能看到登录成功后正确跳转到首页组件啦！

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