web-dev-qa-db-fra.com

Comment configurer un serveur de développement webpack avec react router dom v4?

Voici le code de la configuration de mon 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')));

Fonctionne bien, l'application fonctionne sur localhost: 3000/index.html, mais lorsque j'essaie d'implémenter React Router dom v4 Ça ne marche pas C'est le 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
);

Voici le résultat sur localhost: 3000/  build.min.js Et sur localhost: 3000/environ. Je reçois une erreur: impossible d'obtenir/à propos de. Pas ce que j'attends, pourquoi cela ne rendrait-il pas? 

Sur

reactjswebpackreact-routerwebpack-dev-serverreact-router-v4
18
i am gpbaculio

Je ne pense pas que cela ait un rapport avec webpack-config. Here est un référentiel github de base utilisant react-router-4.0. J'ai créé cet exemple sans aucune modification spécifique liée à react-router-4.0 dans la configuration Webpack. 

Ajoutez 'devServer' dans votre configuration webpack si ce n'est déjà fait:

devServer: {
    historyApiFallback: true,
  }

Deux petites suggestions dans votre code, essayez d’utiliser «exact» avec le chemin pour «à propos», c.-à-d. 

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

et, ajoutez des parenthèses pour const à propos de i.e.,

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

J'espère que cela résoudra votre question. Faites-moi savoir si vous avez besoin d'autres informations à ce sujet.

46
Upasana

Dans mon cas, j'ai dû supprimer la configuration du proxy, car le serveur Webpack voulait une réponse de http: // localhost: 3001 .

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

0
vljs