`history.push`的反应路由器竞争条件

Question

Demo: https://codesandbox.io/s/react-router-basic-forked-mnyw6?file=/example.js

This is a uber simplification of our case.

1. Alice lands on /page1/tab1 (click the Start link at top)
2. Alice clicks the "Nav" button. We redirect her to /page2/tab1 (with the hope that there is a tab1 in the page2)
3. We found tab1 is not available for page2, so we redirect Alice to the default tab tab2 of page2, with the "latest" page value in the state. (Expected: page2; Actual: page1)

The issue is that at the time of the second history.push , the first history.push is not yet done so the page state is still page1 . Thus Alice is redirected to /page1/tab2 instead of /page2/tab2 .

I want to use the info in the URL as the source of truth so I don't want to store local state of page and tab . Instead, I always derive the page and tab from the location.pathname .

Answer 1

In your code, when you create function nav , you are creating it with local variable page . React, react router or anything else outside of your component have no idea about this variable. It will never change it's value. On subsequent render you will create absolutely new local variable with same name and new value.

Best way to handle this is to use declarative Redirect . I forked your sandbox to show you how: https://codesandbox.io/s/react-router-race-condition-forked-c43m2?file=/example.js:595-2068

Here is annotated relevant parts:

const location = useLocation();
const history = useHistory();
const [page, tab] = location.pathname.split("/").filter((x) => !!x);
// this you will replace with detecting if there is a tab
// I made small map for two pages, and everything else (like home) covered with undefined
// It also detects what tab would be default, so we can redirect
let actualTab = tabs_on_pages[page]?.includes(tab)
  ? tab
  : tabs_on_pages[page]?.[0];
// since you know what tab you want to display at this point, you render Redirect component instead of a page
// This way router will redirect you where you are needed
if (tab !== actualTab) return <Redirect to={`/${page}/${actualTab}`} />;
// Otherwise return tab
return (
  <div>
    <h2>Home</h2>
    <div>{location.pathname}</div>
    <div>Page: {page}</div>
    <div>Tab: {tab}</div>
    <button onClick={nav}>Nav</button>
  </div>
);

If you still want to use imperative way, you will have to enclose not only page into nav , but window.location so after timeout you will retrieve actual value, like this:

setTimeout(() => {
  const [currentPage] = window.location.pathname.split("/").filter((x) => !!x);
  console.debug(currentPage);
  history.push(`/${currentPage}/tab2`);
}, 1);

I advise you not to go with this path, since it is piling up side effects and mixing multiple sources of truth together. Most likely it will bite you in the future.

Answer on comments

For the page variable, that's just a derived state from the location.pathname, not a react state variable.

Assume that values you get from hooks are state variable. You don't know internal implementation, and even if you are - there is a chance that in next update it will change

May you elaborate on "piling up side effects and mixing multiple sources of truth together"?

What are the multiple sources of truth?

As stated above, when you get value from useLocation you are accessing state variable. If you will get location from window.location , you may get another value, if state inside router not yet updated. Which one of this values you should consider The Truth? From browser point of view it would be value from window.location . From React point of view it would be state variable, because react don't know anything about window and don't track this values. React operates with state and only with current values of the state, so it is preferable to use state as a source of truth. There are ways to make react track some external state, but they still involve using state variables (if you are interested, look how react-redux works - it's very educational).

It's because I used two side-effects = two history.push?

About piling side effects, I meant example with getting value from window.location directly. In general, you can't do much without side effects. Hooks are, in fact, side effects, but with special properties. It is normal to use multiple useEffects in component. However, side effects are often hard to debug and trace, especially when different parts of your system do same things (in your case it is your event handler and react router). If you add some asynchronous operations (like timeouts) it can become even harder. When you use react-router - let router do all hard work of changing history, managing location and notifying react about this. Your goal is to tell react how you want to represent some data. In your case, you can do this declaratively with two components: Link to handle user action, and Redirect in case if current state should end up with redirect. Side effects are often imperative (ie you write precise instructions about how stuff should work), and goal of react and react-router is to make most of your application declarative (ie describe what you want to get and let react and router do their job).

In short, if you can avoid invoking side effect manually - avoid it.