来自门户的React-Router Redirect不重定向

如何解决来自门户的React-Router Redirect不重定向

我正在为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="/">，这应该会关闭“模态”窗口，因为它不在该路径中呈现。 / p>

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

有关其他情况，此项目的GIT存储库位于Glitch Client

到目前为止，我在Ncoughlin: Tag Twitch Clone

上有关于该项目所有部分的大量注释。

解决方法

由于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")
  );
};

建议的选择

请勿将应用程序行为与外观（即模式）组件结合在一起。在模态得到一些“确认”后，有条件地在Redirect中渲染StreamDelete。

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

,

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

f3 <- function(x) paste0(unlist(strsplit(x,",\\s*")),"%")
f3(x)
#[1] "j309%" "j405%" "j667%"
f3(z)
#[1] "j309%" "j405%" "j667%" "j662%"
f3(y)
#[1] "j309%" "j405%" "j667%" "j666%"

f3(w)
#[1] "j309%"

此技术已在本文ui.dev : programmatic navigation

中进行了解释