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

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.Route等権限を確認するコンポーネントでラップしている箇所

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

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

こういう風にやる

useRoutesを使う例

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>