Question

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

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

我读了一些帖子，说要在我的webpack.config.js中添加'publicPath'和'historyApiFallback：true'，但由于某些原因它仍然无法使用。不过，在添加之前，我收到“无法获取网址”错误。

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;

Answer 1

好吧，经过更多研究之后，我进入了this github webpack-dev-server问题页面，该页面建议在我的“ index.html”文件中添加一个do { System.out.print("Name: "); name = sc.nextLine(); System.out.println("Name is \"" + name + "\""); numChild++; System.out.print("Age: "); age = sc.nextInt(); System.out.println("Age is " + age); totalAge += age; System.out.print("Vaccinated for chickenpox? "); vac = sc.nextBoolean(); sc.nextLine(); if (vac) { System.out.println("Vaccinated for chickenpox"); numVac++; } else { System.out.println("Not vaccinated for chickenpox"); } } while (sc.hasNext());：

<base />

显然这是我所缺少的。

Answer 2

这对我有用，谢谢

<base href="/">

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

2 个答案: