在同一路由路径上使用2个differents组件来显示Popup

Question

当我点击按钮时，我花了几个小时试图显示我的Popup组件。

我如何确保首先显示"；可用性"；组件，然后当我点击我的"；Modal"；使用相同可用性路由路径的组件？

App.js

import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Avaibalities from './pages/Avaibalities';
import Modal from './pages/Modal';
<BrowserRouter>
<Switch>
<Route path="/Avaibalities" component={Avaibalities} />
<Route path="/Avaibalities" component={Modal} />
</Switch>
</BrowserRouter>

可用性组件

import React from 'react';
import Modal from '../pages/Modal';
class Avaibalities extends React.Component {
state = {
showModal: false
}
togglePop = () => {
this.setState({
showModal: !this.state.showModal
})
}
render() {
return (
<div>    
<div>
<button className={'button'}
>Validate</button>
<div>
{this.state.showModal ? <Modal toggle={this.togglePop} /> : null}
</div>
</div>
<button className={'buttonReset'} onClick={this.reset}>Reset</button>
</div>
</div>
)
}
}
export default Avaibalities;

模态分量

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}>&times;</span>
<p>I'm A Pop Up!!!</p>
</div>
</div>
);
}
}
export default Modal;

非常感谢

Answer 1

您不需要多次指定路线：

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

"；魔术；将发生在Avaibalities组件本身中。

通常，Modal组件会覆盖其下面的内容。如果这就是您的模态工作方式，那么当它打开时，您只需要将其显示在组件旁边：

render() {
return (
<>
{this.state.showModal && <Modal toggle={this.togglePop} />}
<div>    
<div>
<button className={'button'}>Validate</button>
</div>
<button className={'buttonReset'} onClick={this.reset}>Reset</button>
</div>
</>
)
}

但是，如果由于某种原因仅想要显示Modal，而不不想要显示底层内容，则可以从render方法中提前选择return：

render() {
if(this.state.showModal) {
return  <Modal toggle={this.togglePop} />;
}
return (
<div>    
<div>
<button className={'button'}>Validate</button>
</div>
<button className={'buttonReset'} onClick={this.reset}>Reset</button>
</div>
)
}