概述
React-Router 是 React 框架中的一个重要路由组件，被广泛应用于前端开发中。在 React-Router 的基础上，开发者们推出了许多方便自己使用的封装库。其中，react-router-sagan 是由美团开发的一款高度可定制的路由组件库，为 React 开发者提供了更加灵活、方便的路由管理工具。
本篇文章主要介绍 react-router-sagan 的使用方法，并通过示例代码演示具体应用。
安装
在终端中输入以下命令：
npm install react-router-sagan --save
引入
在你的项目的入口文件, 引入 react-router-sagan 并初始化：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ------- ------ ------ - ---- ---------------------
-- ---- ----------
------ ---- ---- --------------------
------ ----- ---- ---------------------
----------------
--------
--------
------ ----- -------- ---------------- --
------ ------------- ----------------- --
---------
----------
-------------------------------
--我们在上述代码中引入了 Router、Route 和 Switch 这三个组件，并在 <Router> 组件中使用了 <Switch> 和两个 <Route> 组件。
使用
在本示例中，以 Switch 为例进行详细介绍。
<switch>
<Switch> 组件用于包裹多个 <Route> 组件。<Switch> 组件将遍历所有子组件，并在匹配到第一个路径时停止匹配。
一个比较典型的场景是在 / 页面需要渲染 Home 组件，在 /about 页面需要渲染 About 组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- ------ ------ - ---- ---------------------
------ ---- ---- --------------------
------ ----- ---- ---------------------
----- --- - -- -- -
--------
--------
------ ----- -------- ---------------- --
------ ------------- ----------------- --
---------
---------
--
------ ------- ----在上述例子中，当 URL 为 /about 时，<Route> 组件会 render About 组件。使用 Switch 可以有效地避免需要匹配多个 URL 模式的情况下匹配到第一个就渲染的问题。
<route>
<Route> 组件用于指定在 URL 匹配时渲染某个组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- ------ ------ - ---- ---------------------
------ ---- ---- --------------------
----- --- - -- -- -
--------
--------
------ ----- -------- ---------------- --
---------
---------
--
------ ------- ----在上述示例中，<Route> 组件表示当 URL 为 / 时，渲染 Home 组件。
< Route> 组件可以指定三种类型的属性：
- path：该属性指定了组件要匹配的 URL 路径，必须与当前 URL 完全匹配。
- component: 该属性指定要渲染的组件。
- exact: 该属性表示是否精确匹配条目的位置。
<Route exact path="/" component={Home} />在上述示例中，我们在 / 的路径中只匹配一个正斜线。
<link />
使用 <Link> 组件可以让点击一个链接时，页面加载新的 URL。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- ------ ------- ---- - ---- ---------------------
------ ---- ---- --------------------
----- --- - -- -- -
--------
--------
------ ----- -------- ---------------- --
---------
----- ------------------------
---------
--
------ ------- ----在上述示例中，我们使用 Link 组件创建了一个指向 /about 页面的链接。当用户点击该链接时，页面将加载 /about 的 URL，然后继续相应的路由逻辑。
总结
react-router-sagan是由美团开发的一款高度可定制的路由组件库。- 使用
Router、Route和Switch这三个组件在你的项目的入口文件中使用。 Switch组件用于包裹多个<Route>组件，将遍历所有子组件，并在匹配到第一个路径时停止匹配。<Route>组件用于指定在 URL 匹配时渲染某个组件。- 使用
<Link>组件可以让点击一个链接时，页面加载新的 URL。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcf967216659e244e09