「react-router-dom」 に用意されている「usePrams」が機能しません。
解決したいこと
MERNスタックでSNSアプリをつくっています。
データーベスからユーザー情報を取得を取得する際ににエラーが発生しました。
「usePrams」を使用した際に「usePrams」は「react-router-dom」 からエクスポートされませんというような内容が返ってきます。
発生している問題・エラー
Failed to compile.
Attempted import error: 'usePrams' is not exported from 'react-router-dom' (imported as 'usePrams').
WARNING in [eslint]
src/pages/profile/Profile.jsx
Line 27:6: React Hook useEffect has a missing dependency: 'username'. Either include it or remove the dependency array react-hooks/exhaustive-deps
ERROR in ./src/pages/profile/Profile.jsx 19:19-27
export 'usePrams' (imported as 'usePrams') 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)
ERROR in ./src/pages/profile/Profile.jsx 126:10-18
export 'usePrams' (imported as 'usePrams') 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 2 errors and 1 warning
該当するソースコード
import React, { useEffect, useState } from 'react'
import "./Profile.css";
import Sidebar from '../../components/sidebar/Sidebar';
import Topbar from '../../components/topbar/Topbar';
import Rightbar from '../../components/rightbar/Rightbar';
import Timeline from '../../components/timeline/Timeline';
import axios from 'axios';
import { usePrams } from 'react-router-dom';
export default function Profile() {
const PUBLIC_FOLDER = process.env.REACT_APP_PUBLIC_FOLDER;
const [user, setUser] = useState({});
const username = usePrams().username;
console.log(username);
useEffect(() => {
const fetchUser = async () => {
const response = await axios.get(
`/users?username=${username}`
);
console.log(response);
setUser(response.data);
};
fetchUser();
}, []);
return (
<>
<Topbar />
<div className="profile">
<Sidebar />
<div className="profileRight">
<div className="profileRightTop">
<div className="profileCover">
<img src={PUBLIC_FOLDER + "/post/3.jpeg"} alt="" className="profileCoverImg"/>
<img src={PUBLIC_FOLDER + "/person/1.jpeg"} alt="" className="profileUserImg"/>
</div>
<div className="profileInfo">
<h4 className="profileInfoName">{user.username}</h4>
<span className="profileInfoDesc">{user.desc}</span>
</div>
</div>
<div className="profileRightBottom">
<Timeline username="tanaka"/>
<Rightbar user={user} />
</div>
</div>
</div>
</>
)
}
色々と調べたところ「withRouter」の実装で同じような状況に陥り解決した方の記事を見つけたので、その方法を試しました。しかしエラーの内容は変わらず解決には至りませんでした。
https://abillyz.com/watanabe/studies/316
自分で試したこと
既存のパッケージをアンインストール。
$ npm uninstall react-router-dom
バージョン5系のものを指定して再度インストール。
$ npm install react-router-dom@5.2.0
結果エラーの内容は変わらず。
そのほかにも様々なサイトを見ましが、
やはりバージョンの問題に関する内容ばかりでした。
バージョンのほかに考えられる原因、また解決方法はありませんでしょうか？
よろしくお願いします。
0 likes
