投稿日:2022/06/07 最終更新日:2022/08/21
TS2305: Module ‘”react-router-dom”‘ has no exported member ‘RouteComponentProps’.が表示された時の解決方法
原因
react-router-domのv6ではRouteComponentPropsが非推奨となり、使用出来なくなりました。そのため、RouteComponentPropsの代わりになる方法でPropsの受け渡しをする必要があります。
また、v5での記述方法に変更があるためv6における変更点を踏まえて書き換える必要があります。
解決法
1. react-router-domをv5にダウングレードする
v6は2021年秋頃にv5からアップデートされました。
現在まで約半年ほどしか経過していないため、ブラウザ検索でエラー解決のノウハウがまだ十分にない状態でもあります。
そのため、しばらくはv5でRouteComponentPropsを使用した方法を採用することも一つの方法です。
V5へのダウングレード方法
npm uninstall react-router-dom
npm install react-router-dom@52.v6の書き方に変更する
<Switch> → <Routes>へ変更する
v5では以下のように<Switch>で<Route>を囲み、<Route>にはexact componentで遷移先のコンポーネントを指定していました。
// v5import React from 'react';import { BrowserRouter, Switch, Route } from 'react-router-dom';import Home from './components/Home';import Sample from './components/sample';<BrowserRouter> <Switch> <Route path="/" exact component={ Home } /> <Route path="/sample" exact component={ Home } /> </Switch></BrowserRouter>v6では<Switch>から<Routes>を使用し、exactの指定は無くなり、component={遷移先}からelement={<遷移先 />}へと変更されました。
// v6import React from 'react';import { BrowserRouter, Switch, Route } from 'react-router-dom';import Home from './components/Home';import Sample from './components/sample';<BrowserRouter> <Routes> <Route path="/" element={ Home } /> <Route path="/sample" element={ Home } /> </Routes></BrowserRouter>
useHistory → useNavigateに変更する
v5ではページ遷移をさせるときにuseHistoryを使用していました。
// v5import { useHistory } from "react-router-dom";
function Button() {
let history = useHistory();
function btnClick() {
history.push("/home");
}
return (
<button onClick={ btnClick } type="button">
トップへ戻る
</button>
);
}v6ではuseHistoryからuseNavigateに変更して使用します。
より直感的に使うことができるため使い勝手は楽になったかと思います。
// v6import { useNavigate } from "react-router-dom";
function Button() {
let navigate = useNavigate();
function btnClick() {
navigate("/");
}
return (
<button onClick={ btnClick } type="button">
トップへ戻る
</button>
);
}
<Redirect> → <Navigate /> に変更する
v5では新しいエントリーに遷移する場合は<Redirect>にpushをつけていました。
<Redirect to="/sample" /><Redirect push to="/sample" />v6ではpushの指定は必要なくなりました。
また、新しいエントリーではなく現在のエントリーに置き換える場合はreplaceを指定します。
<Navgate to="/sample" /><Navgate to="/sample" replace />
<Route>のexactを削除する
v5ではpathに指定したパス文字列と、location.pathName（windowオブジェクトのlocation.pathName）が完全に一致した場合のみコンポーネントを返すようになります。
// v5<Route exact path="/" component={ Home } />v6ではデフォルトが完全一致になったため、exactの記述は不要になりました。
// v6<Route path="/" element={ Home }/>
