Reactjs 反应路由器的模式？

我刚刚知道modals和React路由器DOM在一起工作不是那么容易。 我尝试了很多不同的解决方案，但没有一个奏效

这里是我主页的一段代码：

import { BrowserRouter, Switch, Route, Link } from "react-router-dom";

import AddBtn from "../layout/AddBtn";
import AddTaskModal from "../tasks/AddTaskModal";
import EditTaskModal from "../tasks/EditTaskModal";

<Fragment>
      <SearchBar />
      <div className="container">
        <AddBtn />
        <AddTaskModal />
        <EditTaskModal />
          </Fragment>

从“react router dom”导入{BrowserRouter，Switch，Route，Link}；
从“./layout/AddBtn”导入AddBtn；
从“./tasks/addtaskmodel”导入addtaskmodel；
从“./tasks/edittaskmodel”导入edittaskmodel；

当页面第一次加载时，modals正在工作。 当我使用路由器更改页面（例如/about）时，我回到家中，modals不再工作

有人知道为什么吗？

---

谢谢

您可以使用

ReactDOM.createPortal

。门户是在组件层次结构的一侧呈现元素的方法。下面是构建模式的门户使用示例：

import React from 'react';
import ReactDom from 'react-dom';

const Modal = props => {
    return ReactDom.createPortal(
        <div
            onClick={props.onDismiss}
            className="ui dimmer modals visible active"
        >
            <div onClick={(e) => e.stopPropagation()} className="ui standard modal visible active">
                <div className="header">{props.title}</div>
                <div className="content">
                    {props.content}
                </div>
                <div className="actions">
                    {props.actions}
                </div>
            </div>
        </div>,
        document.querySelector('#modal')
    );
};

export default Modal;

从“React”导入React；
从“react dom”导入react dom；
常量模态=道具=>{
返回ReactDom.createPortal(
e、 stopPropagation（）}className=“ui标准模式可见活动”>
{props.title}
{props.content}
{props.actions}
,
document.querySelector（“#model”）
);
};
导出默认模式；

在index.html上：

模态的工作与DOM无关。贴出你面临的问题。你能详细说明你到底想做什么吗？非常感谢！只是一个解释，模态是一个与页面其余部分结合使用的模块吗？是的。在你的代码中，你有AskModal和EditModal模块，modulemodal只是你修改这些模块的一个例子。非常感谢！我现在没有能力实施它，但我会的！你可以给我留言，如果可以的话，我会帮你的