How to configure webpack dev server with react router dom v4?

Question

This is the code of my webpack 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')));

Works fine, the app runs on localhost:3000/index.html but when I try to implement React Router dom v4. It doesn't 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/ And on localhost:3000/about. I get an error: Cannot GET /about . Not what I'm expecting, why would this not render?

About

Why would you want to put an extra `
` around your Route-Components? You should place `` around the different Routes https://reacttraining.com/react-router/web/api/Switch — Björn Böing, Jun 28 '17 at 14:46
@Bjoern I tried Switch but also don't work. I used that divs because Router wants only one child. — gpbaculio, Jun 28 '17 at 15:34
Hey, Did you find the answer for that? I too got the same issue... — Beckham_Vinoth, Feb 02 '18 at 13:59

score 85 · Accepted Answer · answered Jun 28 '17 at 18:55

85

I do not think it has anything to do with webpack-config. Here is a basic github repository using react-router-4.0. I have created this example without any specific changes related to react-router-4.0 in webpack config.

Add 'devServer' in your webpack config if not already:

devServer: {
    historyApiFallback: true,
  }

Two small suggestions in your code, try using 'exact' with the path for 'about' i.e.

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

and, add parenthesis for const about i.e.,

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

Hope, this solves your query. Let me know if you require any other information on this.

answered Jun 28 '17 at 18:55

Upasana

1,708
11
16

1

I didn't know about the historyApiFallback config, so thanks for sharing. – Kevin Østerkilde Sep 30 '17 at 09:04
I needed to restart my app with npm start – Pablo Cegarra May 30 '18 at 08:29
1

fallback specifically redirects 404s back to your root or index, letting you mimic server-side rendering or fallbacks you might have setup in nginx or s3 or however else your app deploys. – worc Aug 28 '18 at 21:50

score 2 · Answer 2 · edited Oct 16 '19 at 16:20

2

In my case I had to remove proxy config, because the webpack server wanted a response from http://localhost:3001.

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

edited Oct 16 '19 at 16:20

Félix Gagnon-Grenier

7,344
10
45
58

answered Feb 16 '19 at 14:25

vljs

820
7
13

How to configure webpack dev server with react router dom v4?

About

2 Answers2

Linked