如何使用 react router dom v4 配置 webpack 开发服务器？

IT技术 reactjs webpack react-router webpack-dev-server react-router-v4
2021-03-27 19:56:29

这是我的 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/构建.min.js 和 localhost:3000/about 上的结果。我收到一个错误：无法获取 /about 。不是我所期望的，为什么不渲染？

关于

2个回答

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

如果还没有，请在您的 webpack 配置中添加“devServer”：

devServer: {
    historyApiFallback: true,
  }

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

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

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

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

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

回退专门将 404 重定向回您的根目录或索引，让您模拟可能在 nginx 或 s3 中设置的服务器端渲染或回退，或者您的应用程序部署的其他方式。
2021-05-30 19:56:29
我不知道 historyApiFallback 配置，所以感谢分享。
2021-06-19 19:56:29
我需要使用 npm start 重新启动我的应用程序
2021-06-21 19:56:29

就我而言，我不得不删除代理配置，因为 webpack 服务器想要来自http://localhost:3001的响应。

// proxy: {
//   '/': 'http://localhost:3001',
// },
其它你可能感兴趣的问题
上一篇import * as react from 'react' 与 import react from 'react' 有什么区别 下一篇为什么我们要在没有依赖数组的情况下使用 useEffect？