javascript - 来自门户的 React-Router 重定向而不是重定向

Question

我正在开发用于 React 实践的 Twitch 克隆应用程序，并且我正在为用户想要删除视频流时创建模态弹出窗口。基本上他们有一个流列表，他们点击其中一个流上的删除按钮，然后使用 ReactDOM.createPortal 打开一个模式。
这是删除按钮

import React from "react";

import Modal from "../Modal";

const StreamDelete = () => {

  return (
    <>
      <Modal />
    </>
  );
};

export default StreamDelete;

这是模态的代码

import React from "react";
import ReactDOM from "react-dom";
import { Redirect } from "react-router-dom";

const Modal = () => {

  
  return ReactDOM.createPortal(
    <div
      className="ui dimmer modals visible active"
      onClick={ () => {
        return <Redirect to="/" />;
      } }
    >
      <div className="ui standard modal visible active">
        <div className="header">Delete Stream</div>
        <div className="content">
          Are you sure you want to delete this stream?
        </div>
        <div className="actions">
          <button className="ui primary button">Delete</button>
          <button className="ui button">Cancel</button>
        </div>
      </div>
    </div>,
    document.querySelector("#modal")
  );
};

export default Modal;

此模式只能在 React-Router 路由上查看 /streams/:id/delete
我的预期行为是，当我点击深色背景时，我的 onClick那里的函数应该返回 <Redirect to="/">因此应该关闭 Modal 窗口，因为它没有在该路径中呈现。
我得到的行为是点击深色背景不会重定向，尽管我也没有收到任何错误。
有关其他上下文，此项目的 GIT 存储库在此处 Glitch Client
到目前为止，我在此项目的所有部分都有大量的笔记 Ncoughlin: Tag Twitch Clone

Answer 1

自 StreamDelete由 Route 直接渲染成分

<Route path="/streams/:id/delete" exact component={StreamDelete} />

解决方案
它通过路由 Prop ，因此可以访问 history支柱。您可以在 StreamDelete 中使用它并将回调传递给模态以执行您想要的操作。

const StreamDelete = ({ history }) => {
  const doRedirect = () => history.replace("/");
  return (
    <>
      <Modal onDelete={doRedirect} />
    </>
  );
};

模态

const Modal = ({ onDelete }) => {
  return ReactDOM.createPortal(
    <div
      className="ui dimmer modals visible active"
      onClick={onDelete}
    >
      <div className="ui standard modal visible active">
        <div className="header">Delete Stream</div>
        <div className="content">
          Are you sure you want to delete this stream?
        </div>
        <div className="actions">
          <button className="ui primary button">Delete</button>
          <button className="ui button">Cancel</button>
        </div>
      </div>
    </div>,
    document.querySelector("#modal")
  );
};

选择
如果您想避免使用 history，请使用声明式实现出于某种原因支撑。
在模态中使用一些“重定向”状态有条件地渲染 Redirect .

const Modal = () => {
  const [redirect, setRedirect] = useState(false);

  if (redirect) {
    return <Redirect to="/" />;
  }
  
  return ReactDOM.createPortal(
    <div
      className="ui dimmer modals visible active"
      onClick={() => setRedirect(true)}
    >
      <div className="ui standard modal visible active">
        <div className="header">Delete Stream</div>
        <div className="content">
          Are you sure you want to delete this stream?
        </div>
        <div className="actions">
          <button className="ui primary button">Delete</button>
          <button className="ui button">Cancel</button>
        </div>
      </div>
    </div>,
    document.querySelector("#modal")
  );
};

建议的替代方案
不要将应用行为与展示(即模态)组件结合起来。有条件地渲染 Redirect在 StreamDelete根据模态的一些“确认”。

const StreamDelete = () => {
  const [confirm, setConfirm] = useState(false);
  
  return confirm ? (
    <Redirect to="/" />
  ) : (
    <Modal onConfirm={() => setConfirm(true)} />
  );
};