Question

我使用React制作了这个网站，当然我使用React Router进行路由，当我在localhost上运行时它可以工作。现在，当我创建我的生产版本并在线上传时，点击en/signup的链接就可以了。它显示找不到错误页面。所以我有点想知道这里究竟出了什么问题。我不认为捆绑有任何问题。顺便说一句，我在我的项目中也使用了Redux，React-Redux。

TLDR：导航到en/signup之类的网址在生产版本中不起作用。

希望你们能帮助我。感谢。

Answer 1

您的webpack配置是什么样的？

尝试添加此内容：

var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './app/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index_bundle.js',
    publicPath: '/'                        // <- this right here
  },
  module: {
    rules: [
      { test: /\.(js)$/, use: 'babel-loader' },
      { test: /\.css$/, use: [ 'style-loader', 'css-loader' ]}
    ]
  },
  devServer: {                      // <-- and this object too
    historyApiFallback: true,
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'app/index.html'
    })
  ]
};

我认为目前正在发生的事情是，如果您直接导航到网址，由于React（和React Router）尚未加载，他们无法处理网址路由。因此，浏览器导航到en/signup的静态资源，当然没有任何内容。

因此，通过添加上面的publicPath值，您告诉它首先向root发送请求，然后在加载所有内容后，将传递请求的URL。

我不确定这是不是幕后发生的事情，但我认为效果是正确的。

Answer 2

在反应路由器上停留了几天后，我阅读了React Training中的文档。然后，我按照快速入门步骤进行了修改，以满足我的要求。

import {
  HashRouter as Router,
  Route,
  } from 'react-router-dom';

  <Router>
    <div>
      <Header />
      <Route exact path="/" component={Content} />
      <Route path="/:country" component={SnaContent} />
      <Footer />
    </div>
  </Router>

这已解决了该问题。希望它对遇到类似问题的其他人有所帮助。

当我在线上传我的webpack生成版时，为什么我的路由不起作用？

2 个答案: