wake-up-neo.net

Wie konfiguriere ich den webpack dev server mit dem reactor router dom v4?

Dies ist der Code meiner Webpack-Konfiguration: 

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

Funktioniert gut, die App läuft auf localhost: 3000/index.html, aber wenn ich versuche, React Router dom v4 zu implementieren. Es funktioniert nicht Dies ist der 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
);

Dies ist das Ergebnis auf localhost: 3000/  build.min.js Und auf localhost: 3000/ungefähr. Ich erhalte einen Fehler: Kann nicht/ungefähr. Nicht was ich erwarte, warum sollte das nicht gerendert werden? 

Über

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

Ich glaube nicht, dass es etwas mit webpack-config zu tun hat. Hier ist ein grundlegendes github-Repository, das den reakt-router-4.0 verwendet. Ich habe dieses Beispiel ohne spezifische Änderungen in Bezug auf den reakt-router-4.0 in webpack config erstellt. 

Fügen Sie in Ihrer Webpack-Konfiguration "devServer" hinzu, falls noch nicht geschehen:

devServer: {
    historyApiFallback: true,
  }

Zwei kleine Vorschläge in Ihrem Code. Versuchen Sie, "exakt" mit dem Pfad für "ungefähr" zu verwenden, d. H. 

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

und füge eine Klammer für const hinzu, d.h.

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

Hoffe, das löst deine Frage. Lassen Sie mich wissen, wenn Sie weitere Informationen dazu benötigen.

46
Upasana

In meinem Fall musste ich die Proxy-Konfiguration entfernen, da der Webpack-Server eine Antwort von http: // localhost: 3001 wollte.

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

0
vljs