如何使用react router dom v4配置webpack dev服务器？

Question

这是我的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 /约。我收到一个错误：无法获取/关于。不是我期待的，为什么这不会呈现？

关于

Answer 1

我不认为它与webpack-config有任何关系。 Here是使用react-router-4.0的基本github存储库。我创建了这个示例，没有任何与webpack配置中的react-router-4.0相关的具体更改。

添加＆＃39; devServer＆＃39;在你的webpack配置中，如果还没有：

devServer: {
    historyApiFallback: true,
  }

您的代码中有两个小建议，请尝试使用＆＃39; exact＆＃39;通过＆＃39; about＆＃39;即

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

并且，为const添加括号，即。，

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

希望，这可以解决您的疑问。如果您需要任何其他信息，请与我们联系。

Answer 2

在我的情况下，我必须删除代理配置，因为Webpack服务器需要http://localhost:3001的响应。

// proxy: { // '/': 'http://localhost:3001', // },