Question

我正在使用react v16和react-router-dom v4，并且我的路由已经大部分工作了。我正在使用webpack-dev-server运行我的开发环境，当我刷新或手动为react应用程序输入URL时，它在大多数情况下都可以正常工作。我的问题是，当我开始将url路径添加到路由时，刷新和手动url输入将不再起作用。

一个简单的例子：

<Router>
    <Root>
      <Switch>
        <Route exact path='/' component={Welcome} />
        <Route path='/home' component={Home} />
        <Route path='/profile/:id' component={Profile} />
        <Route path='/profile/dashboard' component={Dashboard} />
        <Redirect to='/' />
      </Switch>
    </Root>
</Router>

在这种情况下，从应用程序启动时，我目前可以导航至所需的任何位置，也可以刷新“ / home”和“ /”路由。唯一的问题是带有额外路径的路线。如果我导航到“ / profile / dashboard”并刷新，则会收到一堆404错误，指出所有静态链接都已损坏。似乎webpack现在正在重定向到不存在的/ profile /文件夹。我怎样才能解决这个问题？我的react-router-dom设置或Webpack设置有问题吗？

这也是我的开发环境的webpack配置。我用--history-api-fallback

称呼它

module.exports = {
  devServer: {
    inline: true,
    contentBase: './',
      port: 4200
  },
  devtool: 'cheap-module-eval-source-map',
  entry: './index.js',
  mode: 'development',
  module: {
      loaders: [
          {
              test: /\.js$/,
              loaders: ['babel'],
              exclude: /node_modules/
          },
          {
              test: /\.scss/,
              loader: 'style-loader!css-loader!sass-loader'
          }
      ]
  },
  output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'bundle.min.js'
  },
  plugins: [
      new webpack.optimize.OccurrenceOrderPlugin(),
      new HtmlWebpackPlugin({
        template: './index.html'
    })
  ]
};

Answer 1

我认为您没有做错任何事情-但我认为您需要设置服务器来加载index.html文件，而不管请求的是什么URL。

当您使用历史记录API时，它实际上并没有命中/profile/dashboard，但是当您从地址栏中加载直接记录时，它正在服务器上寻找/profile/dashboard（因为我正在确保您知道自己的问题）。

运行webpack开发服务器时，您只是在呼叫yarn run webpack-dev-derver --history-api-fallback吗？如果可以的话，也许该选项正在传递给yarn run命令，那么我认为您可以通过运行--history-api-fallback

来确保将yarn run webpack-dev-derver -- --history-api-fallback参数应用于正在运行的命令

您可以修改webpack-dev-server使其也包含https://webpack.js.org/configuration/dev-server/#devserver-historyapifallback，以查看是否可行。

对于生产而言，htaccess中类似https://gist.github.com/RaVbaker/2254618的内容可能会有所帮助，尽管我还没有进行任何测试，所以对于是否能解决您的问题有些微不足道。

Answer 2

我终于找到了答案，这很简单。信用必须从另一个问题得到答案，因为这似乎与 Nested Routes

我只是无法轻松搜索。将MetalLookAndFeel添加到我的index.html之后，问题消失了。我应该早就知道了，因为资源试图链接到除根文件夹之外的其他地方。

我将路径添加到URL后，React路由不会刷新

2 个答案: