如何使用 react router dom v4 配置 webpack 开发服务器? [英] How to configure webpack dev server with react router dom v4?

问题描述

这是我的webpack配置代码:

const 编译器 = webpack({条目:['whatwg-fetch', path.resolve(__dirname, 'js', 'app.js')],模块: {装载机: [{排除:/node_modules/，测试:/\.js$/,装载机:'通天塔'，},],},输出:{文件名:'app.js'，路径:'/'}，});const app = new WebpackDevServer(compiler, {contentBase: '/public/',代理:{'/graphql':`http://localhost:${GRAPHQL_PORT}`}，公共路径:'/js/'，统计信息:{颜色:真实}，});app.use('/', express.static(path.resolve(__dirname, 'public')));

工作正常，该应用程序在 localhost:3000/index.html 上运行，但是当我尝试实现 React Router dom v4 时.它不起作用.这是代码:

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

ReactDOM.render(<浏览器路由器><div><路由精确路径='/' component={App}/><Route path='/about' component={About}/>

</BrowserRouter>,挂载节点);

这是 localhost:3000/并且在本地主机上:3000/about.我收到一个错误:无法获取/about .不是我所期望的，为什么不渲染?

关于

解决方案

我不认为它与 webpack-config 有任何关系.这里是使用 react-router-4.0 的基本 github 存储库.我创建了这个例子，没有任何与 webpack 配置中的 react-router-4.0 相关的特定更改.

如果还没有，请在您的 webpack 配置中添加devServer":

devServer: {historyApiFallback: 真,}

代码中的两个小建议，尝试将exact"与about"的路径一起使用，即

<路由精确路径='/about' component={About}/>

并且，为const添加括号，即，

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

希望，这可以解决您的疑问.如果您需要任何其他信息，请告诉我.

This is the code of my webpack configuration:

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

Works fine, the app runs on localhost:3000/index.html but when I try to implement React Router dom v4. It doesn't work. This is the 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
);

This is the result on localhost:3000/ And on localhost:3000/about. I get an error: Cannot GET /about . Not what I'm expecting, why would this not render?

About

解决方案

I do not think it has anything to do with webpack-config. Here is a basic github repository using react-router-4.0. I have created this example without any specific changes related to react-router-4.0 in webpack config.

Add 'devServer' in your webpack config if not already:

devServer: {
    historyApiFallback: true,
  }

Two small suggestions in your code, try using 'exact' with the path for 'about' i.e.

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

and, add parenthesis for const about i.e.,

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

Hope, this solves your query. Let me know if you require any other information on this.

这篇关于如何使用 react router dom v4 配置 webpack 开发服务器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！