React Routerv4のネストされたルートがwebpack-dev-serverで機能しない

4
Bing Lu 2019-06-13 04:25.

このようにreactアプリのネストされたルートを設定しようとしています

  • / ->ホームページ
  • /about ->ページについて
  • /protected ->保護されたデフォルトページ
  • /protected/page1 ->保護されたページ1

codesandboxで正常に動作します(https://codesandbox.io/s/react-router-nested-route-utqy7)React 16.8.1Reactルーター4.3.1

しかし、webpack-dev-server(3.7.1)で同じことを設定すると/、残りのルートにしか到達できず、到達できません。

私のファイル構造は次のようなものです

├── package.json
├── src
│   ├── index.jsx
│   └── index.html
├── webpack
│   ├── paths.js
│   ├── webpack.common.js
│   └── webpack.dev.js
└── webpack.config.js

path.js

const path = require('path');

module.exports = {
  outputPath: path.resolve(__dirname, '../', 'build'),
  entryPath: path.resolve(__dirname, '../', 'src/index.jsx'),
  templatePath: path.resolve(__dirname, '../', 'src/index.html'),
};

webpack.common.js

const webpack = require('webpack');
const convert = require('koa-connect');
const history = require('connect-history-api-fallback');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');
const commonPaths = require('./paths');

module.exports = {
  entry: commonPaths.entryPath,
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        loader: 'babel-loader',
        exclude: /(node_modules)/,
      },
    ],
  },
  serve: {
    add: app => {
      app.use(convert(history()));
    },
    content: commonPaths.entryPath,
    dev: {
      publicPath: commonPaths.outputPath,
    },
    open: true,
  },
  resolve: {
    modules: ['src', 'node_modules'],
    extensions: ['*', '.js', '.jsx', '.css', '.scss'],
  },
  plugins: [
    new webpack.ProgressPlugin(),
    new HtmlWebpackPlugin({
      template: commonPaths.templatePath,
    }),
    new ScriptExtHtmlWebpackPlugin({
      defaultAttribute: 'async',
    }),
  ],
};

webpack.dev.js

const webpack = require('webpack');
const commonPaths = require('./paths');

module.exports = {
  mode: 'development',
  output: {
    filename: '[name].js',
    path: commonPaths.outputPath,
    chunkFilename: '[name].js',
  },
  module: {
    rules: [
      {
        test: /\.(css|scss)$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
          },
          'sass-loader',
        ],
      },
    ],
  },
  devServer: {
    contentBase: commonPaths.outputPath,
    compress: true,
    hot: true,
  },
  plugins: [new webpack.HotModuleReplacementPlugin()],
};

webpack.config.js

const webpackMerge = require('webpack-merge');
const common = require('./webpack/webpack.common');

const devConfig = require(`./webpack/webpack.dev.js`);
module.exports = webpackMerge(common, devConfig);

index.jsx

import React from "react";
import { render } from "react-dom";
import { BrowserRouter, Route } from "react-router-dom";

const Homepage = () => (
  <div>
    <h1>Home Page</h1>
  </div>
);
const AboutPage = () => (
  <div>
    <h1>About</h1>
  </div>
);
const Protected = () => (
  <div>
    <h1>Protected default page</h1>
  </div>
);
const ProtectedPage1 = () => (
  <div>
    <h1>ProtectedPage1</h1>
  </div>
);

render(
  <BrowserRouter>
    <div>
      <Route path="/" component={Homepage} exact />
      <Route path="/about" component={AboutPage} />

      <Route
        path="/protected"
        render={({ match: { url } }) => (
          <div>
            <Route path={`${url}/`} component={Protected} exact /> <Route path={`${url}/page1`} component={ProtectedPage1} />
          </div>
        )}
      />
    </div>
  </BrowserRouter>,
  document.getElementById('app')
);

設定の一部のパスが正しくないと思います。どこが間違っているのかわかりません。

5 answers

11
Bing Lu 2019-06-14 23:16.

私はついにwebpack-dev-serverがネストされたルートを提供できなかった理由を理解しました。

シングルページアプリケーションとして、/somepathreactアプリにアクセスすると、実際にはにフォールバックし/、パス名を反応ルーターに渡します。Reactルーターは/somepath、ブラウザーの履歴APIを使用して移動します。

webpack-dev-serverは、何らかの理由で、この「履歴APIへのフォールバック」動作をデフォルトで有効にしません。

したがって、webpack設定に追加historyApiFallback: true,する必要がありdevServerます。

これで、のようなすべてのトップレベルルートが機能する/somepathはずですが、のようなネストされたルート/somepath/morepathの場合は十分ではありません。

デフォルトのwebpack-dev-server設定では、コンパイルされたhtmlテンプレートはのようなバンドルされたjsを指し<script type="text/javascript" src="main.js"></script>ます。がと同じパスの下にあるとsrc="main.js"想定していることに注意しmain.jsてくださいindex.html。この仮定はトップレベルのパスに/somepathも当てはまりますが、ネストされたルートの場合/somepath/morepath、この仮定によりhtmlファイルはのmain.jsようにアクセスします/somepath/main.js

そのため、バンドルされたjsにアクセスするときに、htmlファイルの特定の場所を指定する方法を探すことになります。そして、それはの仕事ですpublicPathpublicPath: '/',webpackconfigの出力ブロックに追加します。常にフォルダmain.jsからアクセスするようにhtmlに指示/し、コンパイルされたhtmlはになります<script type="text/javascript" src="/main.js"></script>。それがまさに私たちが探しているものです。

7
oskario 2019-07-26 21:48.

追加してみてください:

<base href="/" />

<head>あなたのタグにindex.html。このようにし/main.jsて、ネストされたルートであっても、常にバンドルを検索します。

1
l30_4l3X 2020-06-16 10:20.

私は質問で説明されているのと同じ問題を抱えていました(webpack-dev-serverがネストされたルートを提供しておらず、トップレベルのルートは正常に機能しています)。悲しいことに、どちらhistoryApiFallback: trueも機能してpublicPath: '/'いませんでした。実際、問題は内部にありindex.html、より正確には内部にありました<script src="bundle.js"></script>。に変更

<script src="/bundle.js"></script>       <!-- do include slash before the file name -->

痛みを終わらせるのに十分でした。

0
SIRANJEEVI.K 2020-05-10 23:57.

基本的にラップ、webpack構成を変更せずに正常<HashRouter><BrowserRouter>動作する代わりに、reactアプリを使用します。HashRouterを使用したくない場合は、webpack.configファイルの下部にあるweb pack dev serverconfigでhistoryApiFallback:trueを自由に使用できます。

like so
 const config = {

........
    devServer: {
        compress: true,
        port: 3000,
        https: false,
        historyApiFallback:true
    }
}
0
Zach Smith 2020-06-30 20:14.

@Bing Luによる回答を要約するには、webpack.config.jsファイルで次のようにします。

module.exports = () => ({
  mode: 'development',
  entry: ...,
  ...,
  output: {
    ...
    publicPath: '/' // <- this is the important line along with historyApiFallback = true in the dev server config
  },
  ...,
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    historyApiFallback: true,
    compress: true,
    ...
  },
})

Related questions

MORE COOL STUFF

「水曜日」シーズン1の中心には大きなミステリーがあります

「水曜日」シーズン1の中心には大きなミステリーがあります

Netflixの「水曜日」は、典型的な10代のドラマ以上のものであり、実際、シーズン1にはその中心に大きなミステリーがあります.

ボディーランゲージの専門家は、州訪問中にカミラ・パーカー・ボウルズが輝くことを可能にした微妙なケイト・ミドルトンの動きを指摘しています

ボディーランゲージの専門家は、州訪問中にカミラ・パーカー・ボウルズが輝くことを可能にした微妙なケイト・ミドルトンの動きを指摘しています

ケイト・ミドルトンは、州の夕食会と州の訪問中にカミラ・パーカー・ボウルズからスポットライトを奪いたくなかった、と専門家は言う.

一部のファンがハリー・スタイルズとオリビア・ワイルドの「非常に友好的な」休憩が永続的であることを望んでいる理由

一部のファンがハリー・スタイルズとオリビア・ワイルドの「非常に友好的な」休憩が永続的であることを望んでいる理由

一部のファンが、オリビア・ワイルドが彼女とハリー・スタイルズとの間の「難しい」が「非常に友好的」な分割を恒久的にすることを望んでいる理由を見つけてください.

エリザベス女王の死後、ケイト・ミドルトンはまだ「非常に困難な時期」を過ごしている、と王室の専門家が明らかにする 

エリザベス女王の死後、ケイト・ミドルトンはまだ「非常に困難な時期」を過ごしている、と王室の専門家が明らかにする&nbsp;

エリザベス女王の死後、ケイト・ミドルトンが舞台裏で「非常に困難な時期」を過ごしていたと伝えられている理由を調べてください.

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セント ヘレナ島のジェイコブズ ラダーは 699 段の真っ直ぐ上る階段で、頂上に到達すると証明書が発行されるほどの難易度です。

The Secrets of Airline Travel Quiz

The Secrets of Airline Travel Quiz

Air travel is far more than getting from point A to point B safely. How much do you know about the million little details that go into flying on airplanes?

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

バイオニック読書はあなたをより速く読むことができますか?

バイオニック読書はあなたをより速く読むことができますか?

BionicReadingアプリの人気が爆発的に高まっています。しかし、それは本当にあなたを速読術にすることができますか?

独自のGoogleHomeジュークボックスを作成する方法

独自のGoogleHomeジュークボックスを作成する方法

スマートホームサウンドシステムをワンランク上に上げたいとお考えの場合は、これが楽しい方法です。少し余分な作業といくつかのRFIDテクノロジーを使用して、次のパーティーで感動すること間違いなしの独自のカード駆動ジュークボックスを構築できます。

はい、私たちの生活のための行進は黒人についてでした、そしてそれは時間についてです

はい、私たちの生活のための行進は黒人についてでした、そしてそれは時間についてです

コモンとアンドラデイは、2018年3月24日、ワシントンDCで開催されるマーチフォーアワーライフズラリーで、シェハン枢機卿学校合唱団のメンバーと「スタンドアップフォーサムシング」を行います。

テスラモデル3について何を知りたいですか?

テスラモデル3について何を知りたいですか?

テスラモデル3は未来的であるだけでなく、驚くほど普通に感じます。しかし、実際には何が正常ですか?前回はモデル3を数時間しか運転で​​きませんでしたが、今回は週末を過ごしました。

今週のビジネス:スイッチポートの本当の問題

今週のビジネス:スイッチポートの本当の問題

見積もり| 「スイッチはPS4やXboxOneほど強力ではありません。誰もがそれを知っています。

ケイト・ミドルトンとウィリアム王子は、彼らが子供たちと行っているスパイをテーマにした活動を共有しています

ケイト・ミドルトンとウィリアム王子は、彼らが子供たちと行っているスパイをテーマにした活動を共有しています

ケイト・ミドルトンとウィリアム王子は、子供向けのパズルの本の序文を書き、ジョージ王子、シャーロット王女、ルイ王子と一緒にテキストを読むと述べた.

事故で押しつぶされたスイカは、動物を喜ばせ水分補給するために野生生物保護団体に寄付されました

事故で押しつぶされたスイカは、動物を喜ばせ水分補給するために野生生物保護団体に寄付されました

Yak's Produce は、数十個のつぶれたメロンを野生動物のリハビリ専門家であるレスリー グリーンと彼女のルイジアナ州の救助施設で暮らす 42 匹の動物に寄付しました。

デミ・ロヴァートは、新しいミュージシャンのボーイフレンドと「幸せで健康的な関係」にあります: ソース

デミ・ロヴァートは、新しいミュージシャンのボーイフレンドと「幸せで健康的な関係」にあります: ソース

8 枚目のスタジオ アルバムのリリースに向けて準備を進めているデミ ロヴァートは、「スーパー グレート ガイ」と付き合っている、と情報筋は PEOPLE に確認しています。

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

イーサン プラスの誕生日のお祝いは、TLC のウェルカム トゥ プラスビルのシーズン 4 のフィナーレで、戦争中の母親のキム プラスと妻のオリビア プラスを結びつけました。

仕事の生産性を高める 8 つのシンプルなホーム オフィスのセットアップのアイデア

仕事の生産性を高める 8 つのシンプルなホーム オフィスのセットアップのアイデア

ホームオフィスのセットアップ術を極めよう!AppExert の開発者は、家族全員が一緒にいる場合でも、在宅勤務の技術を習得しています。祖父や曽祖父が共同家族で暮らしていた頃の記憶がよみがえりました。

2022 年、私たちのデジタル ライフはどこで終わり、「リアル ライフ」はどこから始まるのでしょうか?

20 年前のタイムトラベラーでさえ、日常生活におけるデジタルおよびインターネットベースのサービスの重要性に驚くことでしょう。MySpace、eBay、Napster などのプラットフォームは、高速化に焦点を合わせた世界がどのようなものになるかを示してくれました。

ニューロマーケティングの秘密科学

ニューロマーケティングの秘密科学

マーケティング担当者が人間の欲望を操作するために使用する、最先端の (気味が悪いと言う人もいます) メソッドを探ります。カートをいっぱいにして 3 桁の領収書を持って店を出る前に、ほんの数点の商品を買いに行ったことはありませんか? あなたは一人じゃない。

地理情報システムの日: GIS 開発者として学ぶべき最高の技術スタック

地理情報システムの日: GIS 開発者として学ぶべき最高の技術スタック

私たちが住んでいる世界を確実に理解するには、データが必要です。ただし、空間参照がない場合、このデータは地理的コンテキストがないと役に立たなくなる可能性があります。

Language