随着前端技术的不断发展，单页面应用（Single Page Application，SPA）已成为了越来越流行的应用类型。而在 SPA 应用中，路由是必不可少的一部分，它能够帮助我们实现页面之间的跳转和数据传递。而 react-router 是 React 生态中非常成熟和流行的路由库。接下来，本文将介绍如何使用 react-router 实现 SPA 应用的嵌套路由。
什么是嵌套路由
嵌套路由是指在一个页面中存在多个层级的路由，这些路由之间存在父子关系，子路由只能在父路由下展示。嵌套路由可以让我们更好地组织页面结构，提高页面的可维护性。
如何使用 react-router 实现嵌套路由
在 react-router 中，嵌套路由的实现方式非常简单。我们只需要在父组件中定义子路由，然后在子组件中使用 Switch 和 Route 组件来展示子路由即可。
安装 react-router
首先，我们需要安装 react-router 库。我们可以使用 npm 或者 yarn 来进行安装：
npm install react-router-dom
或者
yarn add react-router-dom
定义父路由
在父组件中，我们需要定义子路由。我们可以使用 Switch 和 Route 组件来定义子路由。
-- -------------------- ---- -------
------ - ------- ----- - ---- -------------------
-------- ----------------- -
------ -
-----
---------- --------------
--------
------ --------------------- --------------------------- --
------ --------------------- --------------------------- --
---------
------
--
-在上面的代码中，我们定义了两个子路由，分别是 /parent/child1 和 /parent/child2。当我们访问这两个子路由时，会分别展示 Child1Component 和 Child2Component 组件。
定义子路由
在子组件中，我们需要使用 Switch 和 Route 组件来展示子路由。在展示子路由时，我们需要将父路由的路径作为前缀。
-- -------------------- ---- -------
------ - ------- ------ ---- - ---- -------------------
-------- ----------------- -
------ -
-----
---------- --------------
----
--------- -------------------------------------------------------
--------- -------------------------------------------------------
-----
--------
------ --------------------------------- -------------------------------- --
------ --------------------------------- -------------------------------- --
---------
------
--
-在上面的代码中，我们定义了两个子路由，分别是 /parent/child1/grandchild1 和 /parent/child1/grandchild2。当我们访问这两个子路由时，会分别展示 Grandchild1Component 和 Grandchild2Component 组件。
完整示例代码
-- -------------------- ---- -------
------ - ------- ------ ---- - ---- -------------------
-------- ----------------- -
------ -
-----
---------- --------------
----
--------- --------------------------------------
--------- --------------------------------------
-----
--------
------ --------------------- --------------------------- --
------ --------------------- --------------------------- --
---------
------
--
-
-------- ----------------- -
------ -
-----
---------- --------------
----
--------- -------------------------------------------------------
--------- -------------------------------------------------------
-----
--------
------ --------------------------------- -------------------------------- --
------ --------------------------------- -------------------------------- --
---------
------
--
-
-------- ----------------- -
------ -
-----
---------- --------------
------
--
-
-------- ---------------------- -
------ -
-----
--------------- --------------
------
--
-
-------- ---------------------- -
------ -
-----
--------------- --------------
------
--
-总结
本文介绍了如何使用 react-router 实现 SPA 应用的嵌套路由。通过定义父路由和子路由，我们可以轻松实现多层级的路由。嵌套路由能够帮助我们更好地组织页面结构，提高页面的可维护性。希望本文能够对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6586b9b9d2f5e1655d119882