[解決] react-router-dom v５ to v6 移行に伴いやること

※こちらはメモ書き程度の殴り書き記事です

author

upgrade-to-react-router-v6

index

connected-react-routerを使っている場合修正(error TypeError: Cannot read properties of undefined (reading 'pathname') at Router (index.js:194))
switchをroutesに修正(言及はしてません)
useHistory
PermissionやAuthによってコンポーネントを分ける場合の修正
nestしたRouteをuseRoutesでどう作るか

connected-react-routerを使っている場合修正。(error TypeError: Cannot read properties of undefined (reading 'pathname') at Router (index.js:194))

error TypeError: Cannot read properties of undefined (reading 'pathname') at Router (index.js:194)

これは何かpathnameのところでエラーになっていると思ったが、実際は

connected-react-routerが出しているもの

で現状これがreact-router-dom v6に対応していない issue

解決には記事にあるように redux-first-history に変更すると動くは動くが、

ここをみながら

型定義を作るかうまいこと参照するのと、パスが redux-first-history/rr6から読み込む必要があり、ちょっとうまくいかないケースがあった(まだ検証中)

そこを変えるか

<ReactRouterDom.BrowserRouter>

単純にこれで行けた(これも今テスト中)

多分どっちかでいける。

そもそも connected-react-routerは開発が止まっているように見えるので期待しない方がいい気がしている

PermissionやAuthによってコンポーネントを分ける場合の修正

Permission.Route等権限を確認するコンポーネントでラップしている箇所

下記のこういうのを変更する

<ReactRouter.Routes>
   <ReactRouter.Route
       element={<Members.Component />}
　　　　　　　　　　　　　　path={RouteEntity.RouteURI.Members}　/>
　　　　　　　<Permission.Route
　　　　　　　　　　　　　component={CompanyInfoPage.Component}
　　　　　　　　　　　　　exact
　　　　　　　　　　　　　path={RouteEntity.RouteURI.Company}/>
...

こういう風にやる

nestしたRouteをuseRoutesでどう作るか

useRoutesでネストしたchildren useRoutesにroute情報をmapした配列を渡す

[{
            path: 'a',
            element: <ReactRouterDom.Outlet />, // /aは何も表示しない場合 Outletでchildrenに処理を移らせる
            children: [
                {
                    path: ':id',
                    element: (
                        <>
                            <A.Component /> // /a/123143 で表示される
                            <ReactRouterDom.Outlet /> // /a/123143の後にpathがさらに続く場合、FragmentでラップしてOutletを入れる
                        </>
                    ),
                    children: [ 
                        {
                            path: 'edit',
                            element: <Edit.Component />
                        }
                    ]
                }
            ]
        }]

childrenを作る場合はoutletを含む
参照

useHistory

useHistoryはuseNavigateに変更

const history = ReactRouterDom.useHistory()
const history = ReactRouterDom.useNavigate()

そして権限のところ

const Routes = () => {
    const location = ReactRouter.useLocation() // ここで画面によって権限の有無を使うようにする
    const me = ReactRedux.useSelector(AuthSelector.authProfileSelector)
    let element = ReactRouterDom.useRoutes(routes(location.pathname, me)) // routesにpathname渡す。meはauth情報が入っていると思ってください
    return element
}

routes

const routes = (path: string, me: Entity.Me | null) => {
    return Permission.isPermitted(path, profile) // ここで評価する
        ? [{path: "", element: </>}] : [ // useRoutesに渡す配列を出し分ける
              {
                  path: '/',
                  element: <NotPermitted.Component /> // ない場合NotPermittedコンポーネント
              }
          ]
})

最終

<ReactRouterDom.BrowserRouter> // 変更
  <Auth.Component>
    <Routes /> // 呼ぶ
  </Auth.Component> 
</ReactRouterDom.BrowserRouter>

kenmori/react-router-domv5tov6.md