React-Redux登录页面路由错误及跳转失效问题求助

Hey，我来帮你梳理下当前遇到的两个问题，以及对应的解决方案：

一、回顾第一个问题：<Route> outside a <Router>错误 #

你现在的代码已经用<ConnectedRouter>正确包裹了所有<Route>组件，所以这个错误已经消失了，但这里有个隐藏的顺序问题，它也是导致你跳转失败的原因之一：

你的index.js里先创建了routerMiddleware再创建history，这会让中间件拿到的是undefined的history，完全无法工作。正确的顺序应该是：

// 先创建history实例
const history = require("history").createBrowserHistory()
// 再用这个history创建路由中间件
const middleware = routerMiddleware(history)

二、重点解决第二个问题：登录成功后无法跳转首页 #

这个问题主要是路由与Redux集成的几个配置错误导致的，一步步来修复：

1. 给Redux Store添加Router Reducer #

使用connected-react-router时，必须把它提供的router reducer合并到你的Redux Store中，否则路由状态无法被Redux管理，dispatch(push('/'))自然不会生效。修改store初始化代码：

const store = init({
  redux: {
    reducers: {
      // 添加router reducer，让connected-react-router能管理路由状态
      router: connectRouter(history),
    },
    middlewares: [ middleware, logger ]
  },
  models
})

2. 移除冲突依赖，替换路由跳转方法 #

你同时安装了react-router-redux和connected-react-router，这两个是替代关系（connected-react-router是react-router-redux针对React Router v4+的升级版本），同时使用会导致冲突：

• 先卸载冲突依赖：

  npm uninstall react-router-redux
  # 或者用yarn：yarn remove react-router-redux
  

• 然后在effects.js里替换push的导入为connected-react-router的版本：

  // 替换原来的 import { push } from 'react-router-redux'
  import { push } from 'connected-react-router'
  

3. 完善登录请求的错误处理 #

确保你的登录请求确实成功进入了跳转逻辑，添加错误捕获避免请求失败时无提示：

fetch(`${config.url}/login`, {
  method: 'POST',
  headers,
  body: JSON.stringify(body)
})
.then(res => {
  // 先检查响应状态码，确保请求成功
  if (!res.ok) throw new Error(`请求失败：${res.status}`)
  return res.json()
})
.then(data => {
  let nextState = this.loginDone(data)
  console.log('登录成功，跳转首页:', data)
  dispatch(push('/'))
  return nextState
})
.catch(err => {
  console.error('登录出错:', err)
  // 这里可以添加前端错误提示，比如通知用户账号密码错误
})

4. 优化路由配置（可选） #

你的路由配置里/和/dashboard都指向Dashboard，可以添加重定向简化逻辑，同时用<Switch>确保每次只匹配一个路由：

// 记得先导入Redirect组件
import {BrowserRouter, Route, Switch, Redirect }from 'react-router-dom'

// 替换原来的Route集合
<Switch>
  <Route exact path='/login' component={LoginForm}/>
  <Route exact path='/dashboard' component={Dashboard}/>
  <Route path='/form' component={MasterForm}/>
  <Route path='/mob' component={MobilityForm}/>
  <Route path='/record' component={CaseRecord}/>
  <Route path='/map' component={MovementMap}/>
  {/* 把根路径重定向到dashboard */}
  <Redirect from='/' to='/dashboard' />
</Switch>

按照这些步骤修改后，应该就能顺利解决跳转问题了！

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