質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.49%
Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

15463閲覧

[React] Linkコンポーネントを使用すると「You should not use <Link> outside a <Router>」といったエラーが表示される

sabx

総合スコア200

Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2018/07/07 03:29

聞きたいこと

React/Reduxを使用してWebアプリを作成しているのですが、<Link>コンポーネントを使用するとタイトルに記載されているエラーが発生してしまいます。
React/Reduxの情報をWebで様々確認してみましたが、情報がすでに過去のものになってしまっている(npmパッケージ等が古くなっている等)などがあり、どうにもわからない状態です。
そこで下記2点質問があります。

  • 今回のエラーに対しての対処方法に関して
  • React/Reduxのキャッチアップ方法はみなさんどうしているのか

をよければお聞きしたいです。
エラーに関しては下記にコードを載せます。もし情報が不足していましたら補足させていただきますので、よろしくお願いいたします。

コード

  • Component

JavaScript

1import React, { Component } from 'react'; 2import { connect } from 'react-redux'; 3import _ from 'lodash'; 4import { 5 BrowserRouter, 6 Route, 7 Switch, 8 Link, 9} from 'react-router-dom'; 10 11import { readLanguages, readRepositories } from '../actions'; 12 13class LanguagesIndex extends Component { 14 componentDidMount() { 15 this.props.readLanguages() 16 } 17 18 readRepositories(event, id) { 19 event.preventDefault(); 20 this.props.readRepositories(id) 21 } 22 23 renderLanguages() { 24 return _.map(this.props.languages, language => ( 25 <React.Fragment key={language.id}> 26 |<Link to={`/languages/${language.id}`} onClick={(event) => this.readRepositories(event, language.id)}>{language.name}</Link> 27 </React.Fragment> 28 )) 29 } 30 31 render() { 32 33 return ( 34 <React.Fragment> 35 <table className="header-table"> 36 <tbody> 37 <tr> 38 <td> 39 <img src="favicon.ico" alt="This describes OSS"/> 40 <b className="hnname"> 41 <a href="">OSS Project List</a> 42 </b> 43 </td> 44 <td className="languages"> 45 {this.renderLanguages()}| 46 </td> 47 </tr> 48 </tbody> 49 </table> 50 </React.Fragment> 51 ) 52 } 53} 54 55const mapStateToProps = state => ({ languages: state.languages }) 56const mapDispatchToProps = ({ readLanguages, readRepositories }) 57 58export default connect(mapStateToProps, mapDispatchToProps)(LanguagesIndex)
  • index.js

JavaScript

1import React from 'react'; 2import ReactDOM from 'react-dom'; 3import { createStore, applyMiddleware } from 'redux'; 4import { Provider } from 'react-redux'; 5import thunk from 'redux-thunk'; 6import { BrowserRouter, Route, Switch } from 'react-router-dom'; 7 8import './index.css'; 9import reducer from './reducers'; 10 11import RepositoriesIndex from './components/repositories_index'; 12import LanguagesIndex from './components/languages_index'; 13import registerServiceWorker from './registerServiceWorker'; 14 15const store = createStore(reducer, applyMiddleware(thunk)) 16 17ReactDOM.render( 18 <Provider store={store}> 19 <React.Fragment> 20 <LanguagesIndex /> 21 <BrowserRouter> 22 <Switch> 23 <Route exact path="/" component={RepositoriesIndex} /> 24 <Route path="/languages/:id" component={RepositoriesIndex} /> 25 </Switch> 26 </BrowserRouter> 27 </React.Fragment> 28 </Provider>, 29 document.getElementById('root')); 30registerServiceWorker();

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

前提

質問に掲載されているコードは、質問と関係ない部分のコードが大量に含まれており、回答する上で回答しづらいので、簡易的なサンプルコードを解説用に作成しました。それをもとに以下、回答となりますので、元のコードと置き換えて参考になさってくださいませ。

サンプルコード

import React, { Component, Fragment } from "react"; import ReactDOM from "react-dom"; import { BrowserRouter, Link, Route, Switch } from 'react-router-dom'; class Home extends Component { render() { return <h1>Home</h1> } } class About extends Component { render() { return <h1>About</h1> } } class NavigationMenu extends Component { render() { return ( <nav> <ul> <li><Link to='/'>Home</Link></li> <li><Link to='/about'>About</Link></li> </ul> </nav> ) } } ReactDOM.render( <BrowserRouter> <Fragment> <NavigationMenu /> <Switch> <Route exact path="/" component={Home} /> <Route exact path="/about" component={About} /> </Switch> </Fragment> </BrowserRouter>, document.getElementById("root") );

Demo => https://codesandbox.io/s/kw3n127wy7

解説

You should not use <Link> outside a <Router>

と、エラーが出ているので、このエラーを素直に捉えれば、You should use <Link> inside a <Router>ということになり、つまり、「LinkコンポーネントはRouterコンポーネントの中で使ってくださいね」ということになります。

上のサンプルコードの場合は、NavigationMenuコンポーネントの中でLinkコンポーネントを使っていますので、NavigationMenuコンポーネント自体がBrowserRouterコンポーネント以下の階層で使われている必要があります。

// 正常 ReactDOM.render( <BrowserRouter> <Fragment> <NavigationMenu /> <Switch> <Route exact path="/" component={Home} /> <Route exact path="/about" component={About} /> </Switch> </Fragment> </BrowserRouter>, document.getElementById("root") );

サンプルコードの上記部分を以下に置き換えた場合、質問に掲載されているエラーが生じることになります。

// エラー ReactDOM.render( <Fragment> <NavigationMenu /> <BrowserRouter> <Switch> <Route exact path="/" component={Home} /> <Route exact path="/about" component={About} /> </Switch> </BrowserRouter> </Fragment>, document.getElementById("root") );

上記コードでエラーが出る原因は、前述の通り、Linkコンポーネントを使用しているNavigationMenuコンポーネントがBrowserRouterの内側ではなく外側にあるからです。

以上をふまえて、ご自身のコードを見直してみてください。

React/Reduxを使用してWebアプリを作成しているのですが、<Link>コンポーネントを使用するとタイトルに記載されているエラーが発生してしまいます。React/Reduxの情報をWebで様々確認してみましたが、情報がすでに過去のものになってしまっている(npmパッケージ等が古くなっている等)などがあり、どうにもわからない状態です。

https://github.com/ReactTraining/react-router

https://reacttraining.com/react-router/web/guides/philosophy

普通に公式サイト、公式のレポジトリーで最新の一次情報を確認することをお勧め致します。

React/Reduxのキャッチアップ方法はみなさんどうしているのか

基本的には公式サイトで何かアップデートがあった時に確認ですね。

あとは、React/Reduxに限らず、フロントエンド関連技術や自分が関心のある技術を発信しているユーザーをTwitterでフォローしたり、ブログをRSSリーダーで購読したりですかね。

投稿2018/07/07 03:50

編集2018/07/07 05:16
HayatoKamono

総合スコア2415

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sabx

2018/07/08 12:57

回答していただきましてありがとうございます! エラーが無事解決しました!またキャッチアップ方法の共有もありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.49%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問