react-router-dom v6

SwitchからRoutesへ

<Switch></Switch>　⇒　<Routes></Routes>

exact廃止, componentからelementへ

<Route path="/" exact component={Home} />
　　　　　　　　　↓
<Route path="/" element={<Home />} />

遷移先へstateを渡す

<Link to={{ pathname: "detailA", state: arr1>}} />
　　　　　　　　　↓
<Link to="detailA" state={{ arr1: arr1 }} />

useHistoryからuseNavigateへ
・navigate()
属性
to : '/home', -1
state: 遷移先で利用できる状態オブジェクト
replace: true時, ページ遷移時に履歴エントリーを置き換え、ユーザーが戻るボタンを使えなくする。

navigate(to, {{ options }})

navigate('/home', {{ replace: true, state: { from: 'home' } }})

<Link>を使わないページ遷移

  const handleNavigate = () => {
    navigate('detailA', {
      state: { arr1: arr1 },
    });
  };


<button onClick={handleNavigate}>DetailA</button>
<button onClick={() => navigate('detailA')}>Detail A</button>