9

我目前正在尝试找到一种方法来显示自定义组件（如 Modal）以使用该Prompt组件确认路由更改。

组件的默认行为Promp是显示带有消息的确认对话框，如您在此示例中所见：React Router：防止转换。

注意：我正在使用该<BrowserRouter>组件。

路由器有一个propnamed getUserConfirmation，您可以使用它来自定义<Prompt>组件的行为。

// this is the default behavior

function getConfirmation(message, callback) {
  const allowTransition = window.confirm(message);
  callback(allowTransition);
}

<BrowserRouter getUserConfirmation={getConfirmation} />;

我正在尝试做的事情：

  • 父组件APP里面
    • 我将confirm状态设置为 true，以显示<Confirm>组件
    • 我试图将callback函数getConfirmation传递给<Confirm>组件以调用它true以允许转换，并false阻止它。
    • 如上所示，回调将true or false在默认行为中调用。
function getConfirmation(message, callback) {
    console.log("Inside getConfirmation function...");
    setConfirmCallback(callback);
    setConfirm(true);
    // const allowTransition = window.confirm(message);
    // callback(allowTransition);
  }

这是App.js呈现的内容：

return (
    <Router getUserConfirmation={getConfirmation}>
      <AllRoutes />
      {confirm && (
        <Confirm confirmCallback={confirmCallback} setConfirm={setConfirm} />
      )}
    </Router>
  );

似乎是什么问题：

  • 该confirm对话框似乎在此时阻止了该功能。所以callback变量/参数仍在范围内。所以一切正常。
  • 当我删除confirm对话框时，该功能会一直运行。当我单击<Confirm>组件内的确认按钮时，callback不再存在。

问题

有谁知道实现这种行为的方法（防止使用自定义组件而不是确认对话框更改路线）使用react-router-dom？

链接到 CodeSandbox

来自 CodeSandbox 的完整代码：

import React, { useState } from "react";
import ReactDOM from "react-dom";
import {
  BrowserRouter as Router,
  Route,
  Switch,
  Link,
  Prompt
} from "react-router-dom";

import "./styles.css";

function App() {
  console.log("Rendering App...");

  const [confirm, setConfirm] = useState(false);
  const [confirmCallback, setConfirmCallback] = useState(null);

  function getConfirmation(message, callback) {
    console.log("Inside getConfirmation function...");
    setConfirmCallback(callback);
    setConfirm(true);
    // const allowTransition = window.confirm(message);
    // callback(allowTransition);
  }

  return (
    <Router getUserConfirmation={getConfirmation}>
      <AllRoutes />
      {confirm && (
        <Confirm confirmCallback={confirmCallback} setConfirm={setConfirm} />
      )}
    </Router>
  );
}

function Confirm(props) {
  function allowTransition() {
    props.setConfirm(false);
    props.confirmCallback(true);
  }

  function blockTransition() {
    props.setConfirm(false);
    props.confirmCallback(false);
  }

  return (
    <React.Fragment>
      <div>Are you sure?</div>
      <button onClick={allowTransition}>Yes</button>
      <button onClick={blockTransition}>No way</button>
    </React.Fragment>
  );
}

function AllRoutes(props) {
  console.log("Rendering AllRoutes...");
  return (
    <Switch>
      <Route exact path="/" component={Home} />
      <Route exact path="/comp1" component={Component1} />
    </Switch>
  );
}

function Home(props) {
  console.log("Rendering Home...");
  return (
    <React.Fragment>
      <div>This is Home</div>
      <ul>
        <li>
          <Link to="/comp1">Component1</Link>
        </li>
      </ul>
    </React.Fragment>
  );
}

function Component1(props) {
  console.log("Rendering Component1...");

  const [isBlocking, setIsBlocking] = useState(true);

  return (
    <React.Fragment>
      <Prompt
        when={isBlocking}
        message={location =>
          `Are you sure you want to go to ${location.pathname}`
        }
      />
      <div>This is component 1</div>
      <Link to="/">Home</Link>
    </React.Fragment>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
4

2 回答 2

9

受此讨论和此示例的启发，我能够使我的示例正常工作。

问题是<Confirm>在创建时，setConfirmCallback()调用还没有完成。因此该<Confirm>组件无法使用callbackfrom getUserConfirmation。

所以我改变了这一行：

FROM:
  setConfirmCallback(callback);
TO:
  setConfirmCallback(()=>callback);

现在它起作用了！

代码沙盒链接

完整的 CodeSandbox 代码：

import React, { useState } from "react";
import ReactDOM from "react-dom";
import {
  BrowserRouter as Router,
  Route,
  Switch,
  Link,
  Prompt
} from "react-router-dom";

import "./styles.css";

function App() {
  console.log("Rendering App...");

  const [confirm, setConfirm] = useState(false);
  const [confirmCallback, setConfirmCallback] = useState(null);

  function getConfirmation(message, callback) {
    console.log("Inside getConfirmation function...");
    setConfirmCallback(() => callback);
    setConfirm(true);
    // const allowTransition = window.confirm(message);
    // callback(allowTransition);
  }

  return (
    <Router getUserConfirmation={getConfirmation}>
      <AllRoutes />
      {confirm && (
        <Confirm confirmCallback={confirmCallback} setConfirm={setConfirm} />
      )}
    </Router>
  );
}

function Confirm(props) {
  console.log("Rendering Confirm...");
  function allowTransition() {
    props.setConfirm(false);
    props.confirmCallback(true);
  }

  function blockTransition() {
    props.setConfirm(false);
    props.confirmCallback(false);
  }

  return (
    <React.Fragment>
      <div>Are you sure?</div>
      <button onClick={allowTransition}>Yes</button>
      <button onClick={blockTransition}>No way</button>
    </React.Fragment>
  );
}

function AllRoutes(props) {
  console.log("Rendering AllRoutes...");
  return (
    <Switch>
      <Route exact path="/" component={Home} />
      <Route exact path="/comp1" component={Component1} />
    </Switch>
  );
}

function Home(props) {
  console.log("Rendering Home...");
  return (
    <React.Fragment>
      <div>This is Home</div>
      <ul>
        <li>
          <Link to="/comp1">Component1</Link>
        </li>
      </ul>
    </React.Fragment>
  );
}

function Component1(props) {
  console.log("Rendering Component1...");

  const [isBlocking, setIsBlocking] = useState(true);

  return (
    <React.Fragment>
      <Prompt
        when={isBlocking}
        message={location =>
          `Are you sure you want to go to ${location.pathname}`
        }
      />
      <div>This is component 1</div>
      <Link to="/">Home</Link>
    </React.Fragment>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
于 2019-06-19T10:13:01.110 回答
0

我为我的案例找到了一个简单的解决方法。我不能分享整个组件，只能分享片段。

// this will initiate the dialogbox render and 
// prevent the window from going back by returning false
const backButtonPressed = async () => {
    leavePrompt(false);
    return false;
}

// this will open the prompt dialog box
const leavePrompt = (endRoom) => {
    setOpenPrompt({open: true, action: endRoom ? "endRoom" : "leaveQuitely"});
}

// render
<Dialog open={openPrompt.open} aria-labelledby="interim-user-dialog-title">
    <DialogContent dividers>
        <Typography variant="h6" gutterBottom>
            Are you sure?
        </Typography>
    </DialogContent>
        <DialogActions>
            <Button onClick={() => setOpenPrompt({...openPrompt, open: false})} color="primary">
                Stay
            </Button>
            <Button onClick={() => history.push("/")} color="secondary">
                Leave
            </Button>
        </DialogActions>
</Dialog>


// when allowedToGoBack state is true then call a method that will render the dialog box
<Prompt
    when={true}
    title={"Alert"}
    message={() => allowedToGoBack ? backButtonPressed() && false : true} 
/>
于 2021-06-12T12:20:31.797 回答