React Router子组件中定义的Route无法正常工作问题

我明白你遇到的困扰了——主组件里的Switch会优先匹配第一个符合条件的路由，而你给/prices/加了exact属性，这就导致当路径切换到/prices/dialog时，主组件里没有任何路由能匹配上，自然不会渲染PricesPage，子组件里的对话框路由也就无从生效了。

下面是具体的修复方案：

1. 调整主组件的路由匹配规则 #

把主组件中/prices/的exact属性去掉，同时把更具体的路由（比如/prices/add/）放在前面，避免被更宽泛的/prices/路由提前匹配：

Router(props) { 
  return (<main> 
    <Switch> 
      {/* 更具体的路由放在前面，避免被宽泛路由拦截 */}
      <Route path="/prices/add/" render={(props) => <PriceGroupAddFormConnected {...props}/>} /> 
      {/* 去掉exact，让/prices/dialog也能匹配到这个路由，渲染PricesPage */}
      <Route path='/prices/' render={(props) => <PricesPage {...props} />} /> 
    </Switch> 
  </main>) 
}

这样修改后，当你点击链接跳转到/prices/dialog时，主组件的Switch会匹配到/prices/路由并渲染PricesPage，子组件Child里的Route就能检测到路径变化，正常弹出对话框了。

2. 优化对话框布局（可选） #

如果需要对话框显示在所有子组件之上，推荐使用React的Portal特性，把对话框挂载到body或者其他层级更高的DOM节点上，这样可以避免父组件的样式（比如overflow: hidden）影响对话框的显示层级。示例代码如下：

function Dialog(props) {
  const portalRoot = document.getElementById('portal-root');
  return ReactDOM.createPortal(
    <div className="dialog-overlay">
      {/* 这里放对话框的内容 */}
    </div>,
    portalRoot
  );
}

记得在HTML文件里提前添加一个<div id="portal-root"></div>节点哦。

这样调整后，既解决了路由不生效的问题，又能满足对话框的布局需求啦。

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