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

Question

聞きたいこと

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();

Answer 1

前提

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

サンプルコード

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リーダーで購読したりですかね。

Comments

[退会済みユーザー]

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