来自门户的 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;

这个modal只能在React-Router Route上查看/streams/:id/delete

我的预期行为是，当我单击深色背景时，我的 onClick 函数应该返回 <Redirect to="/">，因此应该关闭模态窗口，因为它没有在该路径中呈现。

我得到的行为是单击深色背景没有重定向，尽管我也没有收到任何错误。

有关其他上下文，此项目的 GIT 存储库位于此处Glitch Client

到目前为止，我对这个项目的所有部分都有大量的注释Ncoughlin: Tag Twitch Clone

Answer 1

由于StreamDelete 直接由Route 组件渲染

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

解决方案

它被传递了路由道具，因此可以访问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")
  );
};

建议的替代方案

不要将应用行为与展示（即模态）组件结合起来。根据模态框的一些“确认”，有条件地在StreamDelete 中呈现Redirect。

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

Answer 2

按照上面链接的文章中的示例，我也能够让它发挥作用。转换为组件，创建状态，使用点击处理程序触发一个帮助函数，该函数设置状态以有条件地呈现重定向。

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

class Modal extends React.Component {
  state = {
    toDashboard: false,
  }

  handleClick = () => {
    this.setState(() => ({
      toDashboard: true
    }))
  }


  render() {
    if (this.state.toDashboard === true) {
      return <Redirect to='/' />
    }

    return ReactDOM.createPortal(
      
      <div
        className="ui dimmer modals visible active"
        onClick={ this.handleClick }
      >
        <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;

这篇文章ui.dev : programmatic navigation

中解释了这种技术