Create React App 添加 Router(路由)

在 Create React App 中,我们可以使用 React Router 来管理页面之间的路由。React Router 是一个流行的第三方库,它可以帮助我们在 React 应用中实现路由功能。

安装 React Router

首先,我们需要安装 React Router。在终端中使用以下命令来安装 React Router:

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

在应用中添加路由

在我们的应用中,我们可以使用 <BrowserRouter> 组件来包裹整个应用,并在其中定义路由。例如:

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

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

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

在上面的例子中,我们定义了两个路由:一个是根路径 / 对应 Home 组件,另一个是 /about 对应 About 组件。

使用 Link 组件进行导航

为了在应用中进行页面之间的导航,我们可以使用 <Link> 组件。例如:

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

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

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

在上面的例子中,我们定义了一个导航栏组件,其中包含两个链接,分别指向根路径和关于页面。

通过以上步骤,我们成功地在 Create React App 中添加了路由功能。您可以根据实际需求,进一步扩展路由配置和页面组件。


上一篇:添加 Relay
下一篇:环境变量