[解決済み】<Router>の外側で<Link>を使用してはならない
2022-01-30 14:06:51
質問
サンプルアプリケーションでreact-routerを設定しようとしているのですが、以下のエラーが発生します。
You should not use <Link> outside a <Router>
私のアプリはこのように設定されています。
親コンポーネント
const router = (
<div className="sans-serif">
<Router histpry={browserHistory}>
<Route path="/" component={Main}>
<IndexRoute component={PhotoGrid}></IndexRoute>
<Route path="/view/:postId" component={Single}></Route>
</Route>
</Router>
</div>
);
render(<Main />, document.getElementById('root'));
子供/
Main
コンポーネント
export default () => (
<div>
<h1>
<Link to="/">Redux example</Link>
</h1>
</div>
)
何が間違っているのでしょうか?
サンドボックスのリンクはこちらです。 を使用して、問題を実証してください。
解決方法は?
React-Router V4を使用していると思われますが、元々同じものを使用しているので サンドボックスのリンクです。
をレンダリングしていますね。
Main
コンポーネントの呼び出しで
ReactDOM.render
をレンダリングする
Link
の外側にあり、Mainコンポーネントは
Router
そのため、エラーが発生するのです。
ルータの外部で <Link> を使用するべきではありません。
変更点 :
-
のいずれかを使用します。 これらのルーター React-Router V4を使用しているため、BrowserRouter/HashRouterなど、様々なルーターがあります。
-
ルーターは1つしか子を持つことができないので、すべてのルートを
div
または スイッチ . -
React-Router V4では、ネストされたルートの概念がありません。ネストされたルートを使用したい場合は、そのコンポーネント内で直接ルートを定義してください。
チェック この動作例 をそれぞれ変更しました。
親コンポーネントです。
const App = () => (
<BrowserRouter>
<div className="sans-serif">
<Route path="/" component={Main} />
<Route path="/view/:postId" component={Single} />
</div>
</BrowserRouter>
);
render(<App />, document.getElementById('root'));
Main
ルートからのコンポーネント
import React from 'react';
import { Link } from 'react-router-dom';
export default () => (
<div>
<h1>
<Link to="/">Redux example</Link>
</h1>
</div>
)
などなど。
こちらの回答もご覧ください。 react router v4でネストされたルート
関連
-
[解決済み】<Router>の外側で<Link>を使用してはならない
-
[解決済み] react-router-domを使用する際に「Function components cannot be given refs」を回避するにはどうすればよいですか?
-
[解決済み] sh: react-scripts: npm start の実行後にコマンドが見つからない。
-
[解決済み] 'Proptypes'が定義されていない
-
[解決済み] react.jsでng-ifに相当するものは何ですか?
-
[解決済み] React JSでは、状態を直接変異させない、setState() react/no-direct-mutation-stateを使用する。
-
[解決済み] ReactJs "インバリアント違反..." リアクトの古典的な問題
-
[解決済み] react-router-domを使用する際に「Function components cannot be given refs」を回避する方法は?
-
[解決済み] React QueryとReduxの主な違いは何ですか?
-
[解決済み] reactのuseStateフックでコールバックを使う方法 [重複]。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] FontAwesomeの無料パッケージに含まれているアイコンのオブジェクト名はどこにあるのですか?
-
[解決済み] error 'document' is not defined : eslint / React
-
[解決済み] material-ui-pickers KeyboardDatePicker をモーメントで使用するには?
-
[解決済み] ReactjsのEsLintの "react / jsx-props-no-spreading "エラーを無効化する。
-
[解決済み] 非必須項目に対するYupバリデーション
-
[解決済み] ReactJs "インバリアント違反..." リアクトの古典的な問題
-
[解決済み] react-router-domを使用する際に「Function components cannot be given refs」を回避する方法は?
-
[解決済み] componentDidUpdate'メソッドはいつ使用するのですか?
-
[解決済み] Reactプロジェクトに.envファイルを追加する
-
[解決済み】react router v4 / v5でネストされたルート