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

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

ただいまの
回答率

90.34%

  • React.js

    911questions

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

  • Router

    31questions

ReactのCannot GET / エラー

受付中

回答 0

投稿

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

ReactJSのアプリケーションで、routingがうまくいかず、Cannot GET /のエラーが出続けていて困っています。。

自分なりに調べたところ、webpackの設定ファイルで、devServerのプロパティにhistoryApiFallback: trueを追加することで直った方もいるみたいだったのですが、私の方はそれでも直りません。。。

どなたか解決方法をご存知であれば教えていただきたいですm(._.)m

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {createStore, applyMiddleware} from 'redux';
import {Provider} from 'react-redux';
import {BrowserRouter, Switch, Route} from 'react-router-dom';
import Home from './components/home';
import Detail from './components/detail';
import NotFound from './components/not-found';
import ScrollToTop from './components/scroll-to-top';

import reducers from './reducers';

const createStoreWithMiddleware = applyMiddleware()(createStore);

ReactDOM.render(<Provider store={createStoreWithMiddleware(reducers)}>
  <BrowserRouter>
    <ScrollToTop>
    <Switch>
      <Route exact path="/" component={Home}/>
      <Route path="/detail/:detailId" component={Detail}/>
      <Route path="*" component={NotFound} status={404}/>
    </Switch>
    </ScrollToTop>
  </BrowserRouter>
</Provider>, document.getElementById('root'));

webpack.config.js

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = [
  {
    mode: 'production',
    entry: './src/index.js',
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'bundle.js',
      publicPath: '/'
    },
    module: {
      rules: [
        {
          exclude: /node_modules/,
          loader: 'babel-loader',
          query: {
            compact: true,
            presets: ['react', 'es2015', 'stage-1']
          }
        }, {
          test: /\.svg$/,
          loader: 'babel-loader!svg-react-loader'
        }, {
          test: /\.(jpg|png)$/,
          loader: 'url-loader'
        }, {
          test: /\.json$/,
          loader: 'json-loader'
        }, {
          test: /\.css$/,
          loader: 'style-loader!css-loader?modules'
        }, {
          test: /\.scss$/,
          loader: 'sass-loader!css-loader'
        }

      ]
    },
    resolve: {
      extensions: ['*', '.js', '.jsx', '.json']
    },
    devServer: {
      compress: true,
      contentBase: './',
      historyApiFallback: true
    }
  }, {
    mode: 'production',
    entry: './style/style.scss',
    watch: true,
    output: {
      path: __dirname + '/dist/',
      filename: 'style.css'
    },
    module: {
      rules: [
        {
          test: /\.scss$/,
          use: ExtractTextPlugin.extract({
            use: [
              {
                loader: 'css-loader'
              }, {
                loader: 'sass-loader'
              }
            ],
            fallback: 'style-loader'
          })
        }
      ]
    },
    plugins: [new ExtractTextPlugin('style.css')]
  }
];
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正の依頼

  • HayatoKamono

    2018/05/02 13:49

    質問をする際は、以下の「質問するときのヒント」を参考にされると、より回答がつきやすくなったり、より適切な回答が得られやすくなると思います。 https://teratail.com/help/question-tips

    キャンセル

  • rina_teratail

    2018/05/17 14:56

    わざわざありがとうございます!m(_ _)m

    キャンセル

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

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

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

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

  • React.js

    911questions

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

  • Router

    31questions