如何使用 react-router <Prompt> 显示组件以防止或允许路由更改

Question

我目前正在尝试寻找一种方法来显示自定义组件（如模态框）以使用 Prompt 组件确认路线更改。

Promp 组件的默认行为是显示带有消息的确认对话框，如您在此 Example: React Router: Preventing Transitions.

中所见

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

路由器有一个名为 getUserConfirmation 的 prop，您可以使用它来自定义 <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 variable/parameter 仍在范围内。所以一切正常。
当我删除 confirm 对话框时，该功能一直运行。当我单击 <Confirm> 组件内的确认按钮时，callback 不再存在。

问题

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

Link to 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);

Answer 1

受此 discussion and by this example 的启发，我能够使我的示例正常工作。

问题是在创建 <Confirm> 时，setConfirmCallback() 调用尚未完成。因此 <Confirm> 组件无法使用 getUserConfirmation 中的 callback。

所以我更改了这一行：

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

现在可以使用了！

CodeSandbox Link

完整的 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);

Answer 2

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

// 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} 
/>

如何使用 react-router <Prompt> 显示组件以防止或允许路由更改

How to display component using react-router <Prompt> to prevent or allow route change

javascript

reactjs

react-router

react-router-v4

react-router-dom