如何让 Webpack 开发服务器允许的切入点从 React Router

阅读时长 5 分钟读完

在使用 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 了。完整的示例代码如下:

-- -------------------- ---- -------
-- -----------------
-------------- - -
  -- -----
  ------- -
    ----------- -----------
    -- -----
  --
  ---------- -
    ------------------- -----
    -- -----
  -
-

-- --------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------------- ----- - ---- -------------------

-------- ------ -
  ------ --------------
-

-------- ------- -
  ------ ---------------
-

-------- --------- -
  ------ -----------------
-

-------- ----- -
  ------ -
    ---------------
      -----
        ------ ----- --------------- ---------------- --
        ------ -------------------- ----------------- --
        ------ ---------------------- ------------------- --

- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------
纠错
反馈