使用 history.push 后 React Router Redirect 不触发

Question

I am using react-router-dom and I am trying to push to the browser history using the history object from the useHistory hook. The path that I push to should trigger some logic within the router which will force a redirect to another path (which renders some content).

My issue is that the <Redirect /> does not seem to be doing anything and I'm not 100% sure I know why. I created a codepen to demonstrate the issue that I am having. (Same as code below). You can see the issue if you manually navigate the browser in the codepen to the main route eg https://c629mk.csb.app/ , you will see no content load.

import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom";
import {
  Route,
  Switch,
  Redirect,
  useHistory,
  BrowserRouter,
  useRouteMatch
} from "react-router-dom";

const HomeRouter = () => {
  const { path } = useRouteMatch();
  const someRouterSpecificLogic = true;
  const initialPath = someRouterSpecificLogic ? "location" : "videos";
  return (
    <Switch>
      <Route path={`${path}/location`} render={() => <h1>Location</h1>} />
      <Route path={`${path}/videos`} render={() => <h1>Videos</h1>} />
      <Redirect from={`${path}/`} to={`${path}/${initialPath}`} />
    </Switch>
  );
};

const AboutRouter = () => {
  const { path } = useRouteMatch();
  return (
    <Switch>
      <Route path={`${path}/history`} render={() => <h1>History</h1>} />
      <Route path={`${path}/background`} render={() => <h1>Background</h1>} />
      <Redirect from={`${path}/`} to={`${path}/history`} />
    </Switch>
  );
};

const useSomeAsyncHook = () => {
  const [asyncResult, setAsyncResult] = useState(false);
  useEffect(() => {
    setTimeout(() => {
      setAsyncResult("someValue");
    }, 300);
  });
  return asyncResult;
};

const AppRouter = () => {
  const history = useHistory();
  const asycnResult = useSomeAsyncHook();

  useEffect(() => {
    if (asycnResult === "someValue") {
      history.push("/home");
    }
  }, [history, asycnResult]);

  return (
    <>
      <p>There should be other content rendering on this page:</p>
      <Switch>
        <Route path="/home" component={HomeRouter} />
        <Route path="/about" component={AboutRouter} />
        <Redirect from="/" to="/home" />
      </Switch>
    </>
  );
};
const App = () => {
  return (
    <BrowserRouter>
      <AppRouter />
    </BrowserRouter>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

What I think is happening is this:

1. / renders triggering the Redirect to /home
2. useEffect pushes / to the history again
3. Redirect logic does not work the second time around

I am wondering if anyone knows how to force the redirect to happen at 3 again?

Answer 1

This can be resolved by adding a loadState to the code. This way the routes / redirect logic only renders after the history.push has taken place.

I was confused because I thought that history.push would update the internal state of browserRouter and trigger a rerender of all child routes/ redirects. This is not the case. In my case history.push did not cause the Redirect component to rerender to it did not trigger another redirect and the user would just see a white screen. Adding a loadstate as shown below resolved the problem for me:

import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom";
import {
  Route,
  Switch,
  Redirect,
  useHistory,
  BrowserRouter,
  useRouteMatch
} from "react-router-dom";

const HomeRouter = () => {
  const { path } = useRouteMatch();
  const someRouterSpecificLogic = true;
  const initialPath = someRouterSpecificLogic ? "location" : "videos";
  return (
    <Switch>
      <Route path={`${path}/location`} render={() => <h1>Location</h1>} />
      <Route path={`${path}/videos`} render={() => <h1>Videos</h1>} />
      <Redirect from={`${path}/`} to={`${path}/${initialPath}`} />
    </Switch>
  );
};

const AboutRouter = () => {
  const { path } = useRouteMatch();
  return (
    <Switch>
      <Route path={`${path}/history`} render={() => <h1>History</h1>} />
      <Route path={`${path}/background`} render={() => <h1>Background</h1>} />
      <Redirect from={`${path}/`} to={`${path}/history`} />
    </Switch>
  );
};

const useSomeAsyncHook = () => {
  const [asyncResult, setAsyncResult] = useState(false);
  const [asyncResultFetched, setAsyncResultFetched] = useState(false);
  useEffect(() => {
    setTimeout(() => {
      setAsyncResult("someValue");
      setAsyncResultFetched(true);
    }, 300);
  });
  return { asyncResult, asyncResultFetched };
};

const AppRouter = () => {
  const history = useHistory();
  const { asycnResult, asyncResultFetched } = useSomeAsyncHook();

  useEffect(() => {
    if (asycnResult === "someValue") {
      history.push("/home");
    }
  }, [history, asycnResult]);

  if (!asyncResultFetched) {
    return <h1>Loading...</h1>;
  }

  return (
    <>
      <p>There should be other content rendering on this page:</p>
      <Switch>
        <Route path="/home" component={HomeRouter} />
        <Route path="/about" component={AboutRouter} />
        <Redirect from="/" to="/home" />
      </Switch>
    </>
  );
};
const App = () => {
  return (
    <BrowserRouter>
      <AppRouter />
    </BrowserRouter>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

Thank you to @Abdulrahman Ali and @Drew Reese for their assistance in helping me realise what my issue was in the comments of my question above