React Router 4：点击按钮带URL参数跳转路由组件不渲染问题

我之前在Meteor结合React Router 4的项目里碰到过完全一样的问题，折腾了好一阵才找到根源，大概率是下面几个环节出了问题，咱们挨个排查：

1. 编程式导航用错了方式 #

你提到点击按钮后URL变了但组件不渲染，很大可能是直接修改了window.location或者没正确使用React Router的history对象来导航。React Router需要通过它的路由上下文来触发组件的重新渲染，直接改URL只会更新地址栏，不会通知路由系统。

正确做法：用React Router的useHistory钩子（函数组件）或者withRouter高阶组件（类组件） #

比如函数组件里的实现：

import { useHistory } from 'react-router-dom';
import { Meteor } from 'meteor/meteor';

const CreateMapButton = () => {
  const history = useHistory();

  const handleCreate = () => {
    // 调用Meteor方法创建地图
    Meteor.call('maps.create', {}, (err, newMapId) => {
      if (!err) {
        // 通过history.push触发路由跳转
        history.push(`/maps/${newMapId}`);
      } else {
        console.error('创建地图失败:', err);
      }
    });
  };

  return <button onClick={handleCreate}>创建新地图</button>;
};

2. 数据订阅没跟上路由变化 #

刷新页面也无效，而且列表点击链接能正常工作，这说明新创建地图后，订阅数据的时机或者方式有问题：

• 列表点击时，组件已经拿到了地图的完整数据，而创建后直接跳转，地图展示组件可能在订阅完成前就开始渲染，导致没有数据所以不显示；
• 刷新页面时，路由参数（mapId）可能没被正确传递给订阅函数，导致服务器没返回对应数据。

正确做法：用useTracker监听路由参数，动态订阅数据 #

在地图展示组件里，结合useParams获取当前路由的mapId，然后用useTracker动态订阅：

import { useTracker } from 'meteor/react-meteor-data';
import { useParams } from 'react-router-dom';
import { Maps } from '../collections/Maps'; // 你的地图集合

const MapShow = () => {
  const { mapId } = useParams(); // 获取路由里的地图ID

  const { map, isLoading } = useTracker(() => {
    // 根据当前mapId订阅单个地图的数据
    const sub = Meteor.subscribe('maps.single', mapId);
    return {
      map: Maps.findOne(mapId),
      isLoading: !sub.ready()
    };
  }, [mapId]); // 依赖mapId，参数变化时重新订阅

  if (isLoading) {
    return <div>加载地图中...</div>;
  }

  if (!map) {
    return <div>找不到对应的地图</div>;
  }

  return (
    <div className="map-show">
      <h2>{map.title}</h2>
      {/* 渲染地图内容 */}
    </div>
  );
};

别忘了在服务器端配置对应的发布：

// 服务器端代码
import { Meteor } from 'meteor/meteor';
import { Maps } from '../collections/Maps';

Meteor.publish('maps.single', function(mapId) {
  check(mapId, String); // 校验参数类型，避免注入
  return Maps.find({ _id: mapId });
});

3. 路由配置的小坑 #

检查一下你的路由配置，有没有把地图展示的Route放在正确的位置：

• 确保用Switch包裹路由，避免多个Route同时匹配；
• 不要给父路由加不必要的exact属性，导致子路由无法匹配。

比如正确的路由结构：

import { Switch, Route } from 'react-router-dom';
import MapList from './MapList';
import MapShow from './MapShow';
import CreateMapButton from './CreateMapButton';

const AppRouter = () => (
  <div>
    <CreateMapButton />
    <Switch>
      <Route path="/maps/:mapId" component={MapShow} />
      <Route path="/" exact component={MapList} />
    </Switch>
  </div>
);

为什么列表链接能正常工作？ #

因为列表里的<Link to={/maps/${map._id}} />是React Router的声明式导航，它会自动触发路由系统的更新，同时组件在渲染时已经拿到了列表里的地图数据，订阅也能正常触发。而编程式导航如果没走history对象，就会跳过路由系统的状态更新，导致组件不重新渲染。

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