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

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

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

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

React.js

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

解決済

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

sabx
sabx

総合スコア200

Redux

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

React.js

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

1回答

0評価

0クリップ

11281閲覧

投稿2018/07/07 03:29

聞きたいこと

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

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

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

コード

  • Component

JavaScript

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

JavaScript

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ページの「注目」タブのフィードに表示されやすくなります。

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

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

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

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

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

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

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

Redux

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

React.js

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