使用嵌套路径时刷新空白页答案

【问题标题】：Blank page on refresh when using nested path使用嵌套路径时刷新空白页
【发布时间】：2019-09-16 17:40:31
【问题描述】：

我对 react 和 webpack 还很陌生，我正在尝试使用 react-router-dom 在我的 web 应用程序中进行路由。

但是发生了一些奇怪的事情，当我将组件的路径定义为 '/:guid' 时，一切正常，但如果我将其设置为 '/users/:guid'，当我刷新页面。

我读过一些帖子说要在我的 webpack.config.js 中添加 'publicPath' 和 'historyApiFallback: true' 但由于某种原因它仍然无法正常工作。虽然，在添加之前，我得到了“无法获取 url”的错误。

Router.js：

import React from 'react';
import {BrowserRouter, Route, Switch} from 'react-router-dom';
import UserInfo from '../Containers/UserInfo/UserInfo';
import Main from './Main/Main';

const Router = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path='/' component={Main} />
        <Route path='/users/:guid' component={UserInfo} />
      </Switch>
    </BrowserRouter>
  );
};

export default Router;

webpack.config.js：

const path = require('path');

const DIST_DIR = path.resolve(__dirname, 'dist');
const SRC_DIR = path.resolve(__dirname, 'src');

const config = {
  entry: `${SRC_DIR}/app/index.js`,
  output: {
    path: `${DIST_DIR}/`,
    filename: 'bundle.js',
    publicPath: '/'
  },
  module: {
    rules: [
      {
        test: /\.js?$/,
        include: SRC_DIR,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'stage-2']
        }
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  devServer: {
    historyApiFallback: true
  }
};

module.exports = config;

【问题讨论】：

我无法重现您的问题 --> 对我来说工作正常 codesandbox link。您能否发布问题可重现的代码框链接。
我试图在here 中重现该问题，但无法使其正常运行，here 但由于某种原因忽略了我的 webpack.config.js 文件。但你可以在我的github 中找到整个项目。谢谢！

标签： node.js reactjs react-router web-config

【解决方案1】：

好吧，经过更多研究，我到了this github webpack-dev-server 问题页面，该页面建议将<base /> 添加到我的“index.html”文件中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>React Training Project</title>
    <base href="/">
</head>
<body>
    <div id="app"></div>
    <script src="./bundle.js"></script>    
</body>
</html>

显然这就是我所缺少的。

【讨论】：

为我工作！！

【解决方案2】：

这对我有用，谢谢

<base href="/">

【讨论】：

你能解释一下你的答案吗？我无法理解。把这个标签放在哪里？为什么是这个标签？谢谢。