Webpack Dev Server React 子文件夹不工作答案

【问题标题】：Webpack Dev Server React Subfolder Not WorkingWebpack Dev Server React 子文件夹不工作
【发布时间】：2018-09-27 18:31:33
【问题描述】：

我有一个 webpack 开发服务器，我想从一个文件夹中提供服务。示例网址为：

本地主机/应用程序

我的 webpack 配置中有：

devServer: {
    hot: true,
    contentBase: path.resolve(__dirname, "dist"),
    port: 3002,
    host: "0.0.0.0",
    publicPath: "/app",
    historyApiFallback: true,
    disableHostCheck: true
},
output: {
    path: path.join(__dirname, "dist"),
    publicPath: "/app/",
    filename: "app.[hash].js"
}

这很好用。我可以通过访问 localhost/app 来加载我的应用程序。但是由于我使用的是 react，所以我想使用路由器，当我转到该子文件夹下的路由时，我得到一个错误：

Cannot GET /app/user

如果我将所有内容从 / 更改回服务器，那么路由将起作用。我想从一个文件夹中提供服务，并且仍然使用 webpack 开发服务器进行路由工作，但我不确定这是否可能。

这是我的应用和路线。

import React from "react";
import { render } from "react-dom";
import { AppContainer } from "react-hot-loader";
import { BrowserRouter } from 'react-router-dom';

import App from "./components/App";

const renderApp = Component => {
    render(
        <AppContainer>
            <BrowserRouter basename="/app">
                <App />
            </BrowserRouter>
        </AppContainer>,
        document.getElementById("root")
    );
};

renderApp(App);

if (module.hot) {
    module.hot.accept(() => renderApp(App));
}

App.js

import React, { Component } from "react";
import { Route } from 'react-router-dom';
import Login from './Login';

export default class App extends Component {
    render() {
        return (
            <div>
                <Route exact path="/" component={Login}/>
                <Route exact path="/user" component={Login}/>
            </div>
        );
    }
}

我是 webpack 的新手，并且已经四处搜索让子文件夹工作，他们都说这就是它应该如何工作。

有什么想法吗？

谢谢

我通过改变让它工作：

historyApiFallback: {
  index: '/app',
}

【问题讨论】：

你能发布你的路线吗？
我已经添加了。
这是您的LazyRoute 的问题。您正在提供导致它失败的相对导入。不知道你会如何解决它。尝试在你的导入前加上 /app?
我将它重构为仅使用 react 路由器并删除了 LazyRoute，它仍然给出相同的结果

标签： reactjs webpack webpack-dev-server

【解决方案1】：

我通过改变让它工作：

historyApiFallback: {
  index: '/app',
}

【讨论】：