同构应用：客户端路由变更时更新Redux状态中的路由参数

你已经搞定了服务端渲染时把路由参数存入Redux的逻辑，现在要解决客户端路由切换时的状态更新问题，这里有几种实用的方案，你可以根据自己的组件类型（类组件/函数组件）来选择：

方案一：在匹配路由的组件（Post）中处理更新 #

因为Post组件是直接对应/posts/:id路由的，它能直接拿到路由参数，所以可以在组件挂载或更新时触发Redux的更新动作。

类组件版本 #

首先确保Post组件通过withRouter包裹（或者已经从react-router-config的renderRoutes中拿到了路由props），然后在生命周期钩子中处理：

import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import { updatePostId } from '../actions'; // 假设你定义了这个action

class Post extends Component {
  componentDidMount() {
    const { id } = this.props.match.params;
    this.props.updatePostId(id);
  }

  componentDidUpdate(prevProps) {
    // 当路由参数变化时更新Redux状态
    const prevId = prevProps.match.params.id;
    const currentId = this.props.match.params.id;
    if (prevId !== currentId) {
      this.props.updatePostId(currentId);
    }
  }

  render() {
    return <div>当前文章ID：{this.props.id}</div>;
  }
}

const mapStateToProps = state => ({
  id: state.id
});

const mapDispatchToProps = {
  updatePostId
};

// 用withRouter包裹以获取路由相关props
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Post));

函数组件版本 #

可以用useParams和useEffect钩子监听参数变化：

import { useParams } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
import { updatePostId } from '../actions';
import { useEffect } from 'react';

const Post = () => {
  const { id } = useParams();
  const dispatch = useDispatch();
  const currentStateId = useSelector(state => state.id);

  useEffect(() => {
    if (id !== currentStateId) {
      dispatch(updatePostId(id));
    }
  }, [id, dispatch, currentStateId]);

  return <div>当前文章ID：{id}</div>;
};

export default Post;

方案二：全局监听路由变化（在App组件中处理） #

如果你希望在全局层面统一处理路由参数更新，而不是在单个组件里分散处理，可以在App组件中监听路由变化：

类组件版本 #

用withRouter包裹App组件，监听location对象的变化：

import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import { updatePostId } from '../actions';
import { Switch, renderRoutes } from 'react-router-config';

class App extends Component {
  componentDidMount() {
    this.syncRouteIdToRedux(this.props.location);
  }

  componentDidUpdate(prevProps) {
    if (prevProps.location !== this.props.location) {
      this.syncRouteIdToRedux(this.props.location);
    }
  }

  syncRouteIdToRedux(location) {
    // 用正则匹配/posts/:id格式的路由，可根据实际ID格式调整正则
    const postIdMatch = location.pathname.match(/^\/posts\/(\w+)$/);
    if (postIdMatch) {
      const id = postIdMatch[1];
      this.props.updatePostId(id);
    } else {
      // 非文章路由时可选择清空ID或不处理
      // this.props.updatePostId('');
    }
  }

  render() {
    return (
      <div>
        <Header />
        <Switch>
          {renderRoutes(routes)}
        </Switch>
        <Footer />
      </div>
    );
  }
}

const mapDispatchToProps = {
  updatePostId
};

export default withRouter(connect(null, mapDispatchToProps)(App));

函数组件版本 #

用useLocation和useEffect钩子实现全局监听：

import { useLocation } from 'react-router-dom';
import { useDispatch } from 'react-redux';
import { updatePostId } from '../actions';
import { useEffect } from 'react';
import { Switch, renderRoutes } from 'react-router-config';

const App = () => {
  const location = useLocation();
  const dispatch = useDispatch();

  useEffect(() => {
    const postIdMatch = location.pathname.match(/^\/posts\/(\w+)$/);
    if (postIdMatch) {
      const id = postIdMatch[1];
      dispatch(updatePostId(id));
    }
  }, [location, dispatch]);

  return (
    <div>
      <Header />
      <Switch>
        {renderRoutes(routes)}
      </Switch>
      <Footer />
    </div>
  );
};

export default App;

补充：Redux Action和Reducer示例 #

确保你有对应的action和reducer来处理ID的更新：

Action定义 #

// actions.js
export const updatePostId = (id) => ({
  type: 'UPDATE_POST_ID',
  payload: id
});

Reducer定义 #

// reducers.js
const initialState = {
  id: ''
};

export default function rootReducer(state = initialState, action) {
  switch (action.type) {
    case 'UPDATE_POST_ID':
      return {
        ...state,
        id: action.payload
      };
    default:
      return state;
  }
}

这样不管是服务端渲染初始化，还是客户端切换路由，Redux中的id都会和当前路由参数保持一致啦。

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