Q. React-RouterでURLをリダイレクトさせたら元のページに戻れなくなった。

リダイレクトさせるときに replace させないと、リダイレクトされるページの前にいたページへ戻れなくなるのは当たり前だと思うが、質問があったのでまとめた。“元のページ”は”リダイレクトが発生するページ”なのか、“リダイレクトが発生するページの前にいたページ”なのかで認識に齟齬があり説明に難儀した。

リダイレクトする際に replace させないと元のページにブラウザのバックボタンから戻れなくなる。

たとえば /shop/listと/shop/items/:itemid のような URL を考える。

/shopやそれ以下の存在しない URL にアクセスすると/listにリダイレクトされるような Routes を定義し、ItemPage からはいつでも list ページに戻れるようなボタンを設置した。ただしこのとき list ページの URL は変更される可能性があったため、あえてリダイレクトを前提としたnavigate("/shop")のような記述をした。

1
const ItemPage = () => {
2
  return (
3
    <Button
4
      onClick={() => {
5
        navigate("/shop");
6
      }}
7
    >
8
      Back to List
9
    </Button>
10
  );
11
};
12

13
const routes: RouteObject[] = [
14
  {
15
    path: "/list",
16
    element: <ListPage />,
17
  },
18
  {
19
    path: "/items/:itemId",
20
    element: <ItemPage />,
21
  },
22
  {
23
    path: "*",
24
    element: <Navigate to="list" />,
25
  },
26
];

この状況で、ItemPage から ListPage に戻ると、ブラウザのバックボタンで ListPage から離脱できなくなる。 これは history が以下のようになっているためである。

1
 0: /shop/items/0
2
 1: /shop/items/1
3
 2: /shop
4
 3: /shop/list

この状況でブラウザバックをすると 2 の URL/shopにアクセスしようとするため、その度に/shop/listページへリダイレクトすることになる。

1
const routes: RouteObject[] = [
2
  { path: "*", element: <Navigate to="list" replace /> },
3
];

replace を付けておくことで、この状況は回避できる。replace を付けておけば history は以下のようになるため/shop/items/1へ戻ることができるようになる。

1
 0: /shop/items/0
2
 1: /shop/items/1
3
 2: /shop/list