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

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

我终于找到了答案，而且很简单。信用必须去另一个问题的答案，因为这似乎是重复的 Nested Routes

我只是无法轻松搜索它。将<base href="/" /> 添加到我的 index.html 后，问题就消失了。我应该知道它，因为资源试图链接到根文件夹以外的其他地方。

Answer 2

我认为您没有做错任何事情 - 但我认为您需要设置服务器以加载您的 index.html 文件，无论请求什么 url。

当您使用历史 API 时，它实际上并没有点击 /profile/dashboard，但是当您直接从地址栏加载该 API 时，它正在服务器上寻找 /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 的内容可能会有所帮助，尽管我还没有测试过任何东西，所以对于这是否会解决您的问题，这只是一个小小的赌注。