Reactjs webpack devServer如何在浏览器中接受除root/之外的其他路径？

我遵循了webpack设置，然后将我的源代码从CreateReact应用程序复制到webpack。 但我有一个热重编的问题。浏览器无法接受除/以外的任何路由器路径，当我修改除/以外的页面时除外

当我通过“纱线开始”运行webpack devserver时，热重新编码对“/”很有用，例如：。但无法访问其他路径，例如“/main”、“/login”等。。。 例如，当我尝试刷新/main时，出现了“Cannot GET/main”错误消息。 我试图找到一些资源，比如在网页设置中添加“inline:true”，还添加了hot

我也发现其他人的文章，但他们只显示/页面热加载，不像其他页面组件热加载

我也参考了这个网站。

//index.tsx
从“./App”导入应用程序；
导入'bootstrap/dist/css/bootstrap.min.css'；
从“react dom”导入*作为react dom；
从“React”导入*作为React；
导入“core js/modules/es.promise”；
导入“core js/modules/es.array.iterator”；
如果（模块热）{
ReactDOM.render（，document.getElementById（'app'））；
module.hot.accept（）；
}
//App.tsx
从“./redux/store”导入{store，persistor}；
从“./layouts/Framework”导入框架；
从'react redux'导入{Provider}；
从'redux persist/integration/react'导入{PersistGate}；
从“React”导入*作为React；
从'react hot loader/root'导入{hot}
类应用程序扩展了React.Component{
render（）{
返回(
);
}
}
导出默认热（App）；

总体上

/=>在浏览器中修改或刷新组件后，浏览器中的热重新加载成功

/main、/firstComp、/secondComp等..=>在浏览器中修改或刷新零部件后，浏览器中的热重新加载失败。它显示无法获取/{page address}

我想从我的网页获得任何热重新编码的网页

---

谢谢。

我以前没有看到过这样的网页设置，我会按id分块，我会在这里发布这些部分，以防对您有所帮助

entry: "./src/App.js", // This is the component were I wrap routes in app
  output: {
    publicPath: './dist',
    path: path.resolve(__dirname, "dist"),
    filename: "[id].bundle.js",
    chunkFilename: "[id].js", // will auto assign a id to your separate chunks
  },

import React from 'react';
import Routes from './routes/routes'; // Figured I would show you that
const App = () => {
    return ( <div><Routes /></div> );
}

export default App;

resolve: {
    extensions: ["*", ".js", ".jsx", ".css", ".sa"]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.optimize.ModuleConcatenationPlugin(),
    new CompressionPlugin({
      cache: true,
      algorithm: "gzip",
      compressionOptions: {
        level: 5,                               
        minRatio: 0.8
      }
    }),
    new BundleAnalyzerPlugin({
      options: {
        generateStatsFile: true
      }
    }),
    new HtmlWebpackPlugin({
      template: "./public/index.html" // The path to your html
    })
  ],
  devServer: {
    contentBase: "./dist", // Where my file bundles are served from served from
    hot: true            // Enable hot loading
  },
  "devtool": "source-map"
};

---

网页中有太多我没有任何经验的部分，所以希望这能有所帮助。

添加信息后也是同样的问题。在你给我信息后，我用一些代码更新了我的帖子。请帮忙检查一下你是否有时间。Thanks@YangJae Lee我在我的主索引中有hot，就在渲染到dom下，而且我从来没有导入过它，webpack将它添加到我的项目中。就像上面的例子一样

//index.tsx
import App from './App';
import 'bootstrap/dist/css/bootstrap.min.css';
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import "core-js/modules/es.promise";
import "core-js/modules/es.array.iterator";

if (module.hot) {
    ReactDOM.render(<App />, document.getElementById('app'));
    module.hot.accept();
}

//App.tsx
import { store, persistor } from './redux/store';
import Framework from './layouts/Framework';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import * as React from 'react';
import { hot } from 'react-hot-loader/root'

class App extends React.Component {
    render() {
        return (
            <div>
                <Provider store={store}>
                    <PersistGate loading={null} persistor={persistor}>
                        <Framework />
                    </PersistGate>
                </Provider>
            </div>
        );
    }
}
export default hot(App);

entry: "./src/App.js", // This is the component were I wrap routes in app
  output: {
    publicPath: './dist',
    path: path.resolve(__dirname, "dist"),
    filename: "[id].bundle.js",
    chunkFilename: "[id].js", // will auto assign a id to your separate chunks
  },

import React from 'react';
import Routes from './routes/routes'; // Figured I would show you that
const App = () => {
    return ( <div><Routes /></div> );
}

export default App;

resolve: {
    extensions: ["*", ".js", ".jsx", ".css", ".sa"]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.optimize.ModuleConcatenationPlugin(),
    new CompressionPlugin({
      cache: true,
      algorithm: "gzip",
      compressionOptions: {
        level: 5,                               
        minRatio: 0.8
      }
    }),
    new BundleAnalyzerPlugin({
      options: {
        generateStatsFile: true
      }
    }),
    new HtmlWebpackPlugin({
      template: "./public/index.html" // The path to your html
    })
  ],
  devServer: {
    contentBase: "./dist", // Where my file bundles are served from served from
    hot: true            // Enable hot loading
  },
  "devtool": "source-map"
};

import App from './App';


ReactDOM.render(<App />, document.getElementById('root'));
module.hot.accept();

import "core-js/modules/es.promise";
import "core-js/modules/es.array.iterator";