React関連のアップデートが早いですね。
インターネットで検索しても、サンプルなどが、すぐに古くなってしまいます。
React Router も 細かい部分で変わっていました。
（自分が）よく使う部分だけ、簡単にまとめておきました。
少しでも参考になれば幸いです。
Route
exact が不要になりました。
この属性が残っていると、うまくルーティングされないようです。
また、Switch も不要になりました。
v5
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<BrowserRouter> <Switch> <Route path="/"><Home /></Route> <Route exact path="/sample/:no" component={Sample}/> <Route path="/sample/:no/:sub" component={Sample}/> <Route path="/about"><About /></Route> <Route><NotFound /></Route> </Switch> <ul> <li><Link to="/">Home</Link></li> <li><Link to="/sample/1">sample/1</Link></li> <li><Link to="/sample/1/10">sample/1/10</Link></li> <li><Link to="/about">About</Link></li> </ul> </BrowserRouter> |
v6
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<BrowserRouter> <Routes> <Route path={`/`} element={<Home />} /> <Route path={`/sample/:no`} element={<Sample />}/> <Route path={`/sample/:no/:sub`} element={<Sample />}/> <Route path={`/about`} element={<About />} /> <Route path={`/*/`} element={<NotFound />} /> </Routes> <ul> <li><Link to="/">Home</Link></li> <li><Link to="/sample/1">sample/1</Link></li> <li><Link to="/sample/1/10">sample/1/10</Link></li> <li><Link to="/about">About</Link></li> </ul> </BrowserRouter> |
useHistory
useHistory が useNavigate に変更されています。
import するときに、warning が表示されます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
? Compiled Successfully in 1311ms lqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqwqqqqqqqqqqk x File x Size x tqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqnqqqqqqqqqqu x /js/app.js x 2.36 MiB x x css/app.css x 231 KiB x mqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqvqqqqqqqqqqj WARNING in ./resources/js/Sample.js 34:16-26 export 'useHistory' (imported as 'useHistory') was not found in 'react-router-dom' (possible exports: AbortedDeferredError, Await, BrowserRouter, Form, HashRouter, Link, MemoryRouter, NavLink, Navigate, NavigationType, Outlet, Route, Router, RouterProvider, Routes, ScrollRestoration, UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, UNSAFE_DataStaticRouterContext, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, UNSAFE_enhanceManualRouteObjects, createBrowserRouter, createHashRouter, createMemoryRouter, createPath, createRoutesFromChildren, createRoutesFromElements, createSearchParams, defer, generatePath, isRouteErrorResponse, json, matchPath, matchRoutes, parsePath, redirect, renderMatches, resolvePath, unstable_HistoryRouter, useActionData, useAsyncError, useAsyncValue, useFetcher, useFetchers, useFormAction, useHref, useInRouterContext, useLinkClickHandler, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes, useSearchParams, useSubmit) webpack compiled with 1 warning ● Mix ????????????????????????? emitting (95%) |
v5
|
1 2 3 4 |
const history = useHistory(); history.push("/"); history.replace("/"); history.goBack(); |
v6
|
1 2 3 4 |
const navigate = useNavigate(); navigate("/"); navigate("/", { replace: true }); navigate(-1); |
参考サイト
こちらのサイトでは、 React Router の変更点を網羅してまとめています。
ぜひ、参考にしてみてください。
React Router を v5 から v6 にアップデートしてみました
https://dev.classmethod.jp/articles/react-router-5to6/
