How to configure webpack dev server using router dom v4?

This is the code for my web package configuration:

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')));

It works fine, the application runs on localhost: 3000 / index.html, but when I try to implement React Router dom v4. This does not work. This is the code:

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

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

This is the result on localhost: 3000 / build.min.js A on localhost: 3000 / rev. I get an error: Cannot get / o. Not what I expect, why not do it?

ABOUT

+23
source share
2 answers

, - webpack-config. - github response-router-4.0. - , response-router-4.0 webpack.

"devServer" -, :

devServer: {
    historyApiFallback: true,
  }

, "" "about" i.e.

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

, const i.e.,

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

, . , .

+54

, - http://localhost:3001.

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

Source: https://habr.com/ru/post/1680330/


All Articles