Redux与React-router联动失效求助：更新Props后页面未同步

结合你使用的React 16.2.0、react-redux 5.0.7、react-router-dom 4.2.2和Redux 3.7.2版本，核心思路是将需要跨组件共享的状态存储在Redux Store中，Auth组件通过dispatch action更新Store，Userpage组件通过connect连接Store获取最新状态。下面是具体实现步骤和代码示例：

1. 配置Redux Store与Reducer #

首先确保你的Store和Reducer能处理用户状态的更新：

Store.js #

// ./components/Store.js
import { createStore } from 'redux';
import rootReducer from './reducers';

// 创建Store，兼容Redux 3.7.2版本
const store = createStore(rootReducer);

export default store;

用户Reducer #

创建一个处理用户状态的reducer，用来响应Auth组件的更新动作：

// ./components/reducers/userReducer.js
const initialState = {
  userInfo: {} // 初始化用户状态
};

export default function userReducer(state = initialState, action) {
  switch (action.type) {
    case 'UPDATE_USER_PROPS':
      // 合并更新的属性，避免覆盖原有状态
      return {
        ...state,
        userInfo: { ...state.userInfo, ...action.payload }
      };
    default:
      return state;
  }
}

// 根Reducer（合并所有reducer）
// ./components/reducers/index.js
import { combineReducers } from 'redux';
import userReducer from './userReducer';

export default combineReducers({
  user: userReducer
});

2. 在Auth组件中更新状态并跳转 #

Auth组件需要dispatch action更新Store，同时通过withRouter注入history对象实现路由跳转：

// ./components/Auth.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';

class Auth extends Component {
  // 模拟更新用户属性的方法（可替换为实际业务逻辑，比如表单提交、接口请求）
  handleUpdateAndNavigate = () => {
    // 要更新的用户属性
    const updatedUserProps = {
      username: 'AZG',
      role: 'admin'
    };

    // 触发Redux action更新Store
    this.props.dispatch({
      type: 'UPDATE_USER_PROPS',
      payload: updatedUserProps
    });

    // 跳转到/user页面
    this.props.history.push('/user');
  };

  render() {
    return (
      <div>
        <button onClick={this.handleUpdateAndNavigate}>更新信息并进入用户页</button>
      </div>
    );
  }
}

// 无需映射状态到props，第一个参数传null；用withRouter注入history
export default withRouter(connect(null)(Auth));

3. 在Userpage组件中获取最新状态 #

Userpage组件通过connect连接Redux Store，将最新的用户状态映射为组件props：

// ./components/Userpage.js
import React, { Component } from 'react';
import { connect } from 'react-redux';

class Userpage extends Component {
  render() {
    const { userInfo } = this.props;
    return (
      <div className="user-page">
        <h1>用户中心</h1>
        <div>用户名：{userInfo.username}</div>
        <div>角色：{userInfo.role}</div>
      </div>
    );
  }
}

// 将Store中的用户状态映射到组件props
const mapStateToProps = (state) => ({
  userInfo: state.user.userInfo
});

// 连接Store与组件
export default connect(mapStateToProps)(Userpage);

4. 配置App.js的路由与Provider #

确保App.js中正确包裹Provider和Router，让所有组件都能访问Store和路由：

// App.js
import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Store from './components/Store';
import Home from './components/Home';
import Auth from './components/Auth';
import Userpage from './components/Userpage';

class App extends Component {
  render() {
    return (
      <Provider store={Store}>
        <Router>
          <Switch>
            <Route path="/" exact component={Home} />
            <Route path="/auth" component={Auth} />
            <Route path="/user" component={Userpage} />
          </Switch>
        </Router>
      </Provider>
    );
  }
}

export default App;

关键注意点 #

• 你的版本不支持React Hooks（React 16.8+才引入），所以必须使用class组件和connect来连接Redux
• withRouter是react-router-dom 4.x版本中给组件注入history对象的方式，确保Auth组件能触发路由跳转
• 状态更新必须通过Redux Store，不能仅依赖组件props传递，否则路由跳转后状态会丢失
• 当Store状态更新时，connect会自动触发Userpage组件的重新渲染，显示最新状态

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