質問

これは、私の webpack 設定のコードです。

const compiler = webpack({
  entry: ['whatwg-fetch', path.resolve(__dirname, 'js', 'app.js')], 
  module: {
    loaders: [
      {
        exclude: /node_modules/, 
        test: /\.js$/, 
        loader: 'babel',
      },
    ],
  },
  output: {filename: 'app.js', path: '/'}, 
});

const app = new WebpackDevServer(compiler, {
  contentBase: '/public/', 
  proxy: {'/graphql': `http://localhost:${GRAPHQL_PORT}`},
  publicPath: '/js/',
  stats: {colors: true}, 
});

app.use('/', express.static(path.resolve(__dirname, 'public')));

正常に動作し、アプリは localhost:3000/index.html で実行されますが、React Router dom v4 を実装しようとすると、うまくいきません。これがそのコードです。

const About = () => <div> <h1>About</h1> </div>

ReactDOM.render(
   <BrowserRouter>
      <div>
      <Route exact path='/' component={App}/>
      <Route  path='/about' component={About}/>
      </div>
    </BrowserRouter>,
  mountNode
);

これは、localhost:3000/での結果です。 そして、localhost:3000/aboutでは。エラーが出るんです。Cannot GET /about . 私が期待しているものではありません。なぜこれがレンダリングされないのでしょうか？

について

解決方法

webpack-configとは関係ないと思うのですが。 これ は、react-router-4.0を使った基本的なgithubのリポジトリです。この例は、webpackのconfigでreact-router-4.0に関連する特定の変更を行わずに作成しました。

webpackの設定に'devServer'がない場合は追加してください。

devServer: {
    historyApiFallback: true,
  }

あなたのコードで2つの小さな提案、'about' のパスで 'exact' を使ってみてください。

<Route exact path='/about' component={About}/>

で、constについては括弧を付けてください。

const About = () => (<div> <h1>About</h1> </div>);

これであなたの疑問が解決されることを願っています。この件に関して他に情報が必要な場合はお知らせください。