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.