React同一路由路径下实现Avaibalities组件弹出Modal弹窗的问题

问题根因梳理 #

• React Router 的<Switch>组件匹配规则为命中第一个符合路径的路由后，立即终止后续匹配逻辑，你在配置里写了两个完全同路径的/Avaibalities路由，对应Modal的第二条路由永远不会被触发，属于完全无效的配置。就算你去掉Switch让两个路由同时渲染，进入/Avaibalities路径时Avaibalities和Modal会同时挂载在页面上，完全不符合“点击按钮才弹出Modal”的交互要求。
• 你的需求本质是：/Avaibalities路径下常驻渲染Avaibalities基础组件，点击按钮在当前页面浮层展示Modal，二者共用同一路径完全不需要为Modal单独配置独立路由。
• Avaibalities组件里的Validate按钮没有绑定点击事件，无法触发弹窗状态切换，这也是点击按钮没有任何反应的直接原因。
• 原代码里Reset按钮绑定了不存在的reset方法，控制台会抛出方法未定义的报错。

可直接运行的修正代码 #

App.js 路由配置 #

删除重复的Modal路由项，不再为Modal单独挂载路由：

import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Avaibalities from './pages/Avaibalities';

<BrowserRouter>
  <Switch>
    <Route path="/Avaibalities" component={Avaibalities} />
  </Switch>
</BrowserRouter>

Avaibalities 组件修正 #

给按钮补全事件绑定，补上缺失的方法定义：

import React from 'react';
import Modal from '../pages/Modal';

class Avaibalities extends React.Component {
  state = {
    showModal: false
  }

  togglePop = () => {
    // 基于上一次状态更新，避免异步状态更新导致的逻辑错误
    this.setState(prevState => ({
      showModal: !prevState.showModal
    }))
  }

  // 补全原代码中绑定但未定义的reset方法
  reset = () => {
    this.setState({ showModal: false })
  }

  render() {
    return (
      <div>    
        <div>
          {/* 绑定按钮点击事件，触发弹窗状态切换 */}
          <button 
            className={'button'} 
            onClick={this.togglePop}
          >
            Validate
          </button>
          <div>
            {this.state.showModal ? <Modal toggle={this.togglePop} /> : null}
          </div>
        </div>
        <button className={'buttonReset'} onClick={this.reset}>Reset</button>
      </div>
    )
  }
}

export default Avaibalities;

Modal 组件 #

原有逻辑没有问题，不需要修改，通过props接收关闭方法即可正常工作：

import React from 'react';

class Modal extends React.Component {
  handleClick = () => {
    this.props.toggle();
  };
  render() {
    return (
      <div className="modal">
        <div className="modal_content">
          <span className="close" onClick={this.handleClick}>×</span>
          <p>I'm A Pop Up!!!</p>
        </div>
      </div>
    );
  }
}

export default Modal;

注意事项 #

• 这类页内浮层场景，把Modal作为Avaibalities组件的内部子组件渲染，天然和基础页面共用同一路径，不会出现路由跳转的问题，也不需要额外的路由配置。
• 如果后续需要实现「刷新页面后弹窗保持打开状态、URL显示弹窗标识」的能力，可以在Avaibalities组件中通过路由的query参数同步showModal状态，依然不需要为Modal配置独立路由。

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