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

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

ただいまの
回答率

90.35%

  • React.js

    909questions

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

  • Redux

    128questions

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 442

kk123

score 111

 聞きたいこと

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

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

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

 コード

  • Component
import React, { Component } from 'react';
import { connect } from 'react-redux';
import _ from 'lodash';
import {
  BrowserRouter,
  Route,
  Switch,
  Link,
} from 'react-router-dom';

import { readLanguages, readRepositories } from '../actions';

class LanguagesIndex extends Component {
  componentDidMount() {
    this.props.readLanguages()
  }

  readRepositories(event, id) {
    event.preventDefault();
    this.props.readRepositories(id)
  }

  renderLanguages() {
    return _.map(this.props.languages, language => (
      <React.Fragment key={language.id}>
        |<Link to={`/languages/${language.id}`} onClick={(event) => this.readRepositories(event, language.id)}>{language.name}</Link>
      </React.Fragment>
    ))
  }

  render() {

    return (
      <React.Fragment>
        <table className="header-table">
          <tbody>
            <tr>
              <td>
                <img src="favicon.ico" alt="This describes OSS"/>
                <b className="hnname">
                  <a href="">OSS Project List</a>
                </b>
              </td>
              <td className="languages">
                {this.renderLanguages()}|
              </td>
            </tr>
          </tbody>
        </table>
      </React.Fragment>
    )
  }
}

const mapStateToProps = state => ({ languages: state.languages })
const mapDispatchToProps = ({ readLanguages, readRepositories })

export default connect(mapStateToProps, mapDispatchToProps)(LanguagesIndex)
  • index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
import { BrowserRouter, Route, Switch } from 'react-router-dom';

import './index.css';
import reducer from './reducers';

import RepositoriesIndex from './components/repositories_index';
import LanguagesIndex from './components/languages_index';
import registerServiceWorker from './registerServiceWorker';

const store = createStore(reducer, applyMiddleware(thunk))

ReactDOM.render(
  <Provider store={store}>
    <React.Fragment>
      <LanguagesIndex />
      <BrowserRouter>
        <Switch>
          <Route exact path="/" component={RepositoriesIndex} />
          <Route path="/languages/:id" component={RepositoriesIndex} />
        </Switch>
      </BrowserRouter>
    </React.Fragment>
  </Provider>,
  document.getElementById('root'));
registerServiceWorker();
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+3

 前提

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

 サンプルコード

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/08 21:57

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

    キャンセル

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

  • ただいまの回答率 90.35%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • React.js

    909questions

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

  • Redux

    128questions

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