reactjs - with - webpack-dev-server

¿Cómo configurar el servidor webpack dev con el enrutador de reacción dom v4?

Question

Este es el código de mi configuración de 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'')));

Funciona bien, la aplicación se ejecuta en localhost: 3000 / index.html pero cuando intento implementar React Router dom v4. No funciona Este es el código:

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

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

Este es el resultado en localhost: 3000 / Y en localhost: 3000 / sobre. Me sale un error: No se puede obtener / acerca de. No es lo que estoy esperando, ¿por qué esto no se procesa?

Acerca de

Answer 1

En mi caso tuve que eliminar la configuración del proxy, porque el servidor del paquete web quería una respuesta de http: // localhost: 3001 .

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

Answer 2

No creo que tenga nada que ver con webpack-config. Here hay un repositorio de github básico que utiliza react-router-4.0. He creado este ejemplo sin ningún cambio específico relacionado con react-router-4.0 en webpack config.

Agregue ''devServer'' en la configuración de su paquete web si aún no lo ha hecho:

devServer: {
    historyApiFallback: true,
  }

Dos pequeñas sugerencias en su código, intente usar ''exacto'' con la ruta para ''aproximadamente'', es decir,

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

y, agregue paréntesis para const sobre ie,

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

Esperanza, esto resuelve tu consulta. Déjame saber si necesitas cualquier otra información sobre esto.