在使用 React 和 Webpack 进行前端开发时，我们通常会使用 React Router 来进行路由管理。然而，在使用 Webpack 开发服务器时，我们可能会遇到一个问题：Webpack 开发服务器默认只支持根路径的访问，而不支持 React Router 路由下的子路径访问。
那么，如何让 Webpack 开发服务器允许的切入点从 React Router 呢？下面将详细介绍具体步骤和示例代码。
1. 修改 Webpack 配置文件
首先，我们需要修改 Webpack 配置文件，使其支持 React Router 路由下的子路径访问。具体操作是在 devServer 配置中添加以下选项：
------------------- -----
这个选项的含义是将任意的 404 响应都重定向到 index.html 上，并且仍然保持当前的 URL。这样就可以在 React Router 中设置的子路径下正常访问了。
完整的 devServer 配置如下所示：
---------- - ------------------- ----- -- ----- -
2. 在 React Router 中设置路由
接下来，我们需要在 React Router 中设置路由。以常见的基于浏览器历史记录的路由为例，可以使用 BrowserRouter 组件来包装根组件，并在 Route 组件中设置路由路径：
------ - -------------- ----- - ---- -------------------
-------- ----- -
------ -
---------------
-----
------ ----- -------- ---------------- --
------ ------------- ----------------- --
------ --------------- ------------------- --
------
----------------
--
-注意，这里的 path 属性应该与 Webpack 配置文件中的 publicPath 相对应。例如，如果 Webpack 配置文件中 publicPath 的值为 /my-app/，那么路由路径应该设置为：
------ ----- --------------- ---------------- -- ------ -------------------- ----------------- -- ------ ---------------------- ------------------- --
3. 修改 Webpack 开发服务器访问地址
最后，我们还需要修改 Webpack 开发服务器的访问地址，以便可以正确地访问 React Router 路由下的子路径。具体操作是在启动 Webpack 开发服务器时添加 --content-base 和 --public-path 选项。
------------------ -------------- ------- ------------- --------
这里的 --content-base 选项表示 Webpack 开发服务器的根目录，而 --public-path 选项表示应用程序打包后在浏览器中访问的路径。这两个选项应该与路由路径和 Webpack 配置文件中的 publicPath 相对应。
至此，我们就可以让 Webpack 开发服务器允许的切入点从 React Router 了。完整的示例代码如下：
-- -----------------
-------------- - -
-- -----
------- -
----------- -----------
-- -----
--
---------- -
------------------- -----
-- -----
-
-
-- --------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------------- ----- - ---- -------------------
-------- ------ -
------ --------------
-
-------- ------- -
------ ---------------
-
-------- --------- -
------ -----------------
-
-------- ----- -
------ -
---------------
-----
------ ----- --------------- ---------------- --
------ -------------------- ----------------- --
------ ---------------------- ------------------- --
----------------------------------------------------------- ----------
---------------------------------------------------------------------------------------