web-dev-qa-db-ja.com

反応ルーターdom v4でwebpack開発サーバーを構成する方法？

これは私の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')));

正常に動作し、アプリはlocalhost：3000/index.htmlで実行されますが、React Router dom v4。が機能しません。これはコードではありません。

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

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

これはlocalhost：3000/ での結果ですbuild.min.js そしてlocalhost：3000/aboutで。エラーが発生しました：/ aboutを取得できません。私が期待しているものではなく、なぜこれがレンダリングされないのですか？

約

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

Webpack-configとは関係ないと思います。 ここ は、react-router-4.0を使用した基本的なgithubリポジトリです。 webpack configのreact-router-4.0に関連する特定の変更なしでこの例を作成しました。

Webpack設定に「devServer」が追加されていない場合は追加します。

devServer: {
    historyApiFallback: true,
  }

コードに2つの小さな提案があります。'about 'のパスで' exact 'を使用してみてください。

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

そして、constについて括弧を追加します。つまり、

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

これでクエリが解決することを願っています。これに関する他の情報が必要な場合はお知らせください。

52
Upasana

私の場合、webpackサーバーが http：// localhost：3001 からの応答を必要としていたため、プロキシ設定を削除する必要がありました。

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

1
vljs