如何在 react-router-dom 中实现像 vue-router 这样的路由器离开守卫？

Question

. Answers to this question are eligible for a +50 reputation bounty. JackChouMine is looking for an .

I need to ask user if submit form or not in react project like in vue-router beforeRouteLeave guard:

<script>
export default {
  name: 'RolePage',
  methods: {
    http() {
      return new Promise(resolve => {
        setTimeout(() => {
          resolve({ ok: true })
        }, 200)
      })
    },
  },
  async beforeRouteLeave(to, from, next) {
    const answer = window.confirm('Do you want submit form?')
    answer && (await this.http())
    next()
  },
}
</script>

This work well when user click goback and forward button in browser menu and Programmatic Navigation work as well. How can I implement the same requirement in react-router-dom?

Answer 1

I believe the answer is to use a blocking flag. See this: https://reactrouter.com/web/example/preventing-transitions

Answer 2

Either you can create this using react-router APIs or use an already available package likeReact Navigation Prompt .

It uses react-router under the hood

Answer 3

It's the simplest example to prevent a user to change the route by using the react-router and react-router-dom packages.

import React from "react";
import { BrowserRouter, Route, NavLink } from "react-router-dom";
import { Prompt } from "react-router";
import "./App.css";

function App() {
  const [dirty, setDirty] = React.useState(false);
  return (
    <BrowserRouter>
      <div className="App">
       <input onChange={() => setDirty(true)} /> {dirty ? "dirty" : "clean"}
       <br />
       <NavLink to="/test">Leave</NavLink>
       <br />
       <Route path="/test" component={() => "Has left"} />
       <Prompt message="Are you sure you want to go to /test?" />
     </div>
    </BrowserRouter>
  );
}
export default App;

You just need to install these two packages react-router and react-router-dom . This is the simplest logic which is built like if your form is dirty then you should prompt the user and prevent them from the leaving the page.

Answer 4

You could do the same in React using window.confirm . Doing it the react way by using state value will have one problem; timing the 2 async actions: setState and your async function call based on the value of answer .

Example below:

App.js

import "./styles.css";
import { Switch, Route } from "react-router-dom";
import Test from "./Test";
import Leave from "./Leaving";

export default function App() {
  return (
    <div className="App">
      <Switch>
        <Route exact path="/prompt" component={Leave} />
      </Switch>
      <Test />
    </div>
  );
}

Test.js

import React, { useState } from "react";
import { Prompt, useHistory } from "react-router-dom";

function Test() {

  const [answer, setIsAnswer] = useState(false);

  const history = useHistory();

  const http = () => {
    console.log("I'll show up on submit");
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({ ok: true });
      }, 200);
    });
  };


  const handleSubmit = async (e) => {
    console.log("**********");
    e.preventDefault();
    e.target.reset();
    setIsAnswer(true);  // setting state is async
    history.push("/prompt");
    answer && (await http()); // answer is yet false
  };

  return (
    <div className="Test">
      <h1>Hello Jack</h1>
      <form onSubmit={(e) => handleSubmit(e)}>
          <Prompt when={true} message={(_) => "Do you want submit form?"} /> // **when**'s value should ideally depend on answer value, harcoded for example purpose.
        <button>Click</button>
      </form>
    </div>
  );
}

export default Test;

Only when you click the second time, the React way of prompt is in action since setIsAnswer is async.

You could use the same window.confirm onSubmit.

const handleSubmit = async (e) => {
    console.log("**********");
    e.preventDefault();
    e.target.reset();
    const answer = window.confirm("Do you want submit form?");
    answer && history.push("/prompt");
    answer && (await http());
  };
    
     

I created a working example for you here in codesandbox https://codesandbox.io/s/charming-dew-u32wx

In the above sandbox, handleSubmit is plain JS way. handleSubmit2 is React way(click twice). Remove the commented <Prompt .../> inside the form and change onSubmit function to handleSubmit then handleSubmit2 to see both in action.

Explanation :

Any react module or approach that will rely on the state value will not help with your scenario, where you make HTTP call after prompt confirmation. window.comfirm is blocking code, using state for answer is non-blocking. If it's just about prompting before navigating away then you could go with the above react or any other react approach suggested.

Update in response to comments:

You could prevent the browser back button navigation by adding the below code.

const history = useHistory();

  useEffect(() => {
    return () => {
      if (history.action === "POP") {
       return false;
      }
   };
 }, [history]);

or in your Prompt itself through callback

<Prompt
    when={(location, action) => {
      if (action === "POP") {
        //
      }
    }}
    message={(_) => "Are you sure, you want to go back?"}
/>

I've updated the Leaving.js in the codesandbox with this browser back button scenario.