超级会员免费看
React URL 路由使用指南
在现代 Web 应用开发中，URL 路由是实现单页面应用（SPA）的关键技术之一。它允许我们根据不同的 URL 显示不同的内容，而无需重新加载整个页面。本文将详细介绍如何在 React 应用中使用 URL 路由，包括 URL 匹配、路由限制、多 URL 指定、正则表达式匹配等技术。
1. URL 匹配
在 React 中，
Route
组件是实现 URL 匹配的核心。通过设置
path
属性，我们可以指定需要匹配的 URL 规则。以下是一个简单的示例：
import React, { Component } from "react";
import { BrowserRouter as Router, Link, Route } from "react-router-dom";
export class Selector extends Component {
renderMessage = (msg) => <h5 className="bg-info text-white m-2 p-2">{ msg }</h5>
render() {
return <Router>
<div className="container-fluid">
<div className="row">
<div className="col-2">
<div><Link to="/data/one">Link #1</Link></div>
<div><Link to="/data/two">Link #2</Link></div>
<div><Link to="/people/bob">Bob</Link></div>
</div>
<div className="col">
<Route path="/data"
render={ () => this.renderMessage("Route #1") } />
<Route path="/data/two"
render={ () => this.renderMessage("Route #2") } />
</div>
</div>
</div>
</Router>
}
}
在这个示例中，有三个
Link
组件，分别指向
/data/one
、
/data/two
和
/people/bob
。第一个
Route
组件的
path
属性设置为
/data
，它将匹配任何以
data
开头的 URL，因此会匹配
/data/one
和
/data/two
，但不匹配
/people/bob
。第二个
Route
组件的
path
属性设置为
/data/two
，它只会匹配
/data/two
URL。
2. 使用属性限制匹配
Route
组件的默认匹配行为可能会导致过度匹配。为了避免这种情况，
Route
组件支持三个额外的属性：
exact
、
strict
和
sensitive
。
-
exact
：当设置为
true
时，只有当 URL 与
path
属性值完全匹配时才会匹配。例如：
<Route path="/data" exact={ true }
render={ () => this.renderMessage("Route #1") } />
在这个例子中，
exact
属性防止第一个
Route
组件匹配
/data/one
和
/data/two
URL。
-
strict
：当设置为
true
时，用于限制带有尾随斜杠的路径只匹配带有相同尾随斜杠的 URL。例如，
/data/
只会匹配
/data/
URL，而不会匹配
/data
。但它仍然会匹配带有额外段的 URL，如
/data/one
。
-
sensitive
：用于控制大小写敏感性。当设置为
true
时，只有当
path
属性的大小写与 URL 的大小写匹配时才会匹配。例如，
/data
不会匹配
/Data
URL。
3. 在路径中指定多个 URL
Route
组件的
path
属性值可以是一个 URL 数组，当其中任何一个 URL 被匹配时，都会显示相应的内容。例如：
<Route path={["/data/one", "/people/bob" ] } exact={ true }
render={ () => this.renderMessage("Route #1") } />
在这个例子中，第一个
Route
组件的
path
属性设置为一个包含
/data/one
和
/people/bob
的数组，并结合
exact
属性来限制匹配的 URL。
4. 使用正则表达式匹配 URL
对于一些复杂的 URL 匹配需求，
Route
组件支持在
path
属性中使用正则表达式。例如：
<Route path={["/data/(one|three)", "/people/b*" ] }
render={ () => this.renderMessage("Route #1") } />
在这个例子中，第一个正则表达式
/data/(one|three)
匹配以
data
开头，第二个段为
one
或
three
的 URL；第二个正则表达式
/people/b*
匹配以
people
开头，第二个段以
b
开头的 URL。
5. 单一路由匹配
每个
Route
组件都会独立评估其
path
属性。如果我们希望根据当前 URL 只显示一个组件，可以使用
Switch
组件。
Switch
组件会按顺序查询多个
Route
组件，并显示第一个匹配当前 URL 的组件的内容。例如：
import React, { Component } from "react";
import { BrowserRouter as Router, Link, Route, Switch } from "react-router-dom";
import { ProductDisplay } from "./ProductDisplay";
import { SupplierDisplay } from "./SupplierDisplay";
export class Selector extends Component {
renderMessage = (msg) => <h5 className="bg-info text-white m-2 p-2">{ msg }</h5>
render() {
return <Router>
<div className="container-fluid">
<div className="row">
<div className="col-2">
<div><Link to="/">Default URL</Link></div>
<div><Link to="/products">Products</Link></div>
<div><Link to="/suppliers">Suppliers</Link></div>
</div>
<div className="col">
<Switch>
<Route path="/products" component={ ProductDisplay} />
<Route path="/suppliers" component={ SupplierDisplay } />
<Route render={ () =>
this.renderMessage("Fallback Route")} />
</Switch>
</div>
</div>
</div>
</Router>
}
}
在这个例子中，
Switch
组件会按顺序检查
Route
组件，将
/products
URL 与
ProductDisplay
组件关联，将
/suppliers
URL 与
SupplierDisplay
组件关联。任何其他 URL 都会使用
renderMessage
方法渲染一条消息。
6. 使用重定向作为回退路由
对于一些应用程序，引入单独的 URL 作为回退可能没有意义。在这种情况下，可以使用
Redirect
组件自动触发导航到一个可以由
Route
组件处理的 URL。例如：
import React, { Component } from "react";
import { BrowserRouter as Router, Link, Route, Switch, Redirect }
from "react-router-dom";
import { ProductDisplay } from "./ProductDisplay";
import { SupplierDisplay } from "./SupplierDisplay";
export class Selector extends Component {
renderMessage = (msg) => <h5 className="bg-info text-white m-2 p-2">{ msg }</h5>
render() {
return <Router>
<div className="container-fluid">
<div className="row">
<div className="col-2">
<div><Link to="/">Default URL</Link></div>
<div><Link to="/products">Products</Link></div>
<div><Link to="/suppliers">Suppliers</Link></div>
</div>
<div className="col">
<Switch>
<Route path="/products" component={ ProductDisplay} />
<Route path="/suppliers" component={ SupplierDisplay } />
<Redirect to="/products" />
</Switch>
</div>
</div>
</div>
</Router>
}
}
在这个例子中，如果
Route
组件无法匹配当前 URL，
Switch
组件会执行重定向到
/products
URL。
7. 选择性重定向
Redirect
组件除了可以使用
to
属性指定重定向的目标 URL 外，还可以使用其他属性来限制重定向的条件。以下是
Redirect
组件的属性说明：
| 属性名 | 描述 |
| ---- | ---- |
| to | 指定浏览器应重定向到的位置。 |
| from | 限制重定向，只有当当前 URL 与指定路径匹配时才会执行。 |
| exact | 当设置为
true
时，只有当当前 URL 与
from
属性完全匹配时才会执行重定向，与
Route
组件的
exact
属性作用相同。 |
| strict | 当设置为
true
时，只有当当前 URL 以
/
结尾（如果路径也以
/
结尾）时才会执行重定向，与
Route
组件的
strict
属性作用相同。 |
| push | 当设置为
true
时，重定向会在浏览器历史记录中添加一个新条目；当设置为
false
时，重定向会替换当前位置。 |
以下是一个选择性重定向的示例：
import React, { Component } from "react";
import { BrowserRouter as Router, Link, Route, Switch, Redirect }
from "react-router-dom";
import { ProductDisplay } from "./ProductDisplay";
import { SupplierDisplay } from "./SupplierDisplay";
export class Selector extends Component {
renderMessage = (msg) => <h5 className="bg-info text-white m-2 p-2">{ msg }</h5>
render() {
return <Router>
<div className="container-fluid">
<div className="row">
<div className="col-2">
<div><Link to="/">Default URL</Link></div>
<div><Link to="/products">Products</Link></div>
<div><Link to="/suppliers">Suppliers</Link></div>
<div><Link to="/old/data">Old Link</Link></div>
</div>
<div className="col">
<Switch>
<Route path="/products" component={ ProductDisplay} />
<Route path="/suppliers" component={ SupplierDisplay } />
<Redirect from="/old/data" to="/suppliers" />
<Redirect to="/products" />
</Switch>
</div>
</div>
</div>
</Router>
}
}
在这个示例中，新的
Redirect
组件会将
/old/data
URL 重定向到
/suppliers
。选择性
Redirect
组件的顺序很重要，它们必须放在非选择性重定向之前，否则
Switch
组件在遍历路由组件列表时将无法到达它们。
8. 渲染导航链接
Link
组件负责生成导航到新 URL 的元素。它通过渲染一个带有事件处理程序的锚元素来改变浏览器的 URL，而无需重新加载应用程序。
Link
组件接受以下属性：
| 属性名 | 描述 |
| ---- | ---- |
| to | 指定点击链接后要导航到的位置。 |
| replace | 指定点击导航链接是在浏览器历史记录中添加一个新条目还是替换当前条目，这决定了用户是否可以使用后退按钮返回上一个位置。默认值为
false
。 |
| innerRef | 用于访问底层 HTML 元素的引用。 |
以下是一个应用类名来样式化导航链接的示例：
import React, { Component } from "react";
import { BrowserRouter as Router, Link, Route, Switch, Redirect }
from "react-router-dom";
import { ProductDisplay } from "./ProductDisplay";
import { SupplierDisplay } from "./SupplierDisplay";
export class Selector extends Component {
renderMessage = (msg) => <h5 className="bg-info text-white m-2 p-2">{ msg }</h5>
render() {
return <Router>
<div className="container-fluid">
<div className="row">
<div className="col-2">
<Link className="m-2 btn btn-block btn-primary"
to="/">Default URL</Link>
<Link className="m-2 btn btn-block btn-primary"
to="/products">Products</Link>
<Link className="m-2 btn btn-block btn-primary"
to="/suppliers">Suppliers</Link>
<Link className="m-2 btn btn-block btn-primary"
to="/old/data">Old Link</Link>
</div>
<div className="col">
<Switch>
<Route path="/products" component={ ProductDisplay} />
<Route path="/suppliers" component={ SupplierDisplay } />
<Redirect from="/old/data" to="/suppliers" />
<Redirect to="/products" />
</Switch>
</div>
</div>
</div>
</Router>
}
}
在这个示例中，使用了 Bootstrap CSS 框架的类名来将导航链接样式化为按钮。
9. 指示活动路由
NavLink
组件是在
Link
组件的基础上构建的，当它的
to
属性值与当前 URL 匹配时，会向锚元素添加一个类或样式。
NavLink
组件的属性如下：
| 属性名 | 描述 |
| ---- | ---- |
| activeClassName | 指定链接激活时要添加到锚元素的类名。 |
| activeStyle | 指定链接激活时要添加到锚元素的样式，样式以 JavaScript 对象的形式指定，对象的属性为样式名称。 |
| exact | 当设置为
true
时，强制精确匹配，与
Route
组件的
exact
属性作用相同。 |
| strict | 当设置为
true
时，强制严格匹配，与
Route
组件的
strict
属性作用相同。 |
| isActive | 可以用于指定一个自定义函数来确定链接是否激活，该函数接收
match
和
location
参数。 |
以下是一个使用
NavLink
组件应用活动类的示例：
import React, { Component } from "react";
import { BrowserRouter as Router, NavLink, Route, Switch, Redirect }
from "react-router-dom";
import { ProductDisplay } from "./ProductDisplay";
import { SupplierDisplay } from "./SupplierDisplay";
export class Selector extends Component {
renderMessage = (msg) => <h5 className="bg-info text-white m-2 p-2">{ msg }</h5>
render() {
return <Router>
<div className="container-fluid">
<div className="row">
<div className="col-2">
<NavLink className="m-2 btn btn-block btn-primary"
activeClassName="active"
to="/">Default URL</NavLink>
<NavLink className="m-2 btn btn-block btn-primary"
activeClassName="active"
to="/products">Products</NavLink>
<NavLink className="m-2 btn btn-block btn-primary"
activeClassName="active"
to="/suppliers">Suppliers</NavLink>
<NavLink className="m-2 btn btn-block btn-primary"
activeClassName="active"
to="/old/data">Old Link</NavLink>
</div>
<div className="col">
<Switch>
<Route path="/products" component={ ProductDisplay} />
<Route path="/suppliers" component={ SupplierDisplay } />
<Redirect from="/old/data" to="/suppliers" />
<Redirect to="/products" />
</Switch>
</div>
</div>
</div>
</Router>
}
}
在这个示例中，当浏览器的 URL 与组件的
to
属性值匹配时，锚元素会被添加到
active
类中，为用户提供了一个有用的指示。需要注意的是，
to
属性为
/
的
NavLink
组件会匹配任何 URL，因为它依赖于
Route
的 URL 匹配规则。可以使用
exact
属性来限制匹配，例如：
<NavLink className="m-2 btn btn-block btn-primary"
activeClassName="active" exact={ true }
to="/">Default URL</NavLink>
通过以上技术，我们可以在 React 应用中实现灵活、高效的 URL 路由功能，为用户提供更好的导航体验。
React URL 路由使用指南
10. 路由匹配流程总结
为了更清晰地理解 React 中 URL 路由的匹配过程，我们可以通过以下 mermaid 流程图来展示：
graph TD;
A[开始] --> B[用户点击链接或输入 URL];
B --> C[Switch 组件按顺序检查 Route 组件];
C --> D{是否匹配第一个 Route 的 path};
D -- 是 --> E[渲染该 Route 对应的组件];
D -- 否 --> F{是否有下一个 Route};
F -- 是 --> C;
F -- 否 --> G{是否有 Redirect};
G -- 是 --> H[执行重定向];
G -- 否 --> I[无匹配内容，可能显示默认信息];
这个流程图展示了从用户操作到最终页面渲染的整个过程。首先，用户点击链接或输入 URL 触发路由匹配。
Switch
组件按顺序检查每个
Route
组件，如果某个
Route
的
path
与当前 URL 匹配，则渲染该
Route
对应的组件。如果所有
Route
都不匹配，会检查是否有
Redirect
，若有则执行重定向，若没有则可能显示默认信息。
11. 实际应用场景分析
下面我们结合一些实际应用场景，进一步说明上述路由技术的使用。
11.1 电商应用的商品和供应商展示
假设我们正在开发一个电商应用，需要展示商品列表和供应商信息。可以使用前面提到的
Switch
、
Route
和
Link
组件来实现导航和内容展示。
import React, { Component } from "react";
import { BrowserRouter as Router, Link, Route, Switch } from "react-router-dom";
import { ProductList } from "./ProductList";
import { SupplierList } from "./SupplierList";
export class EcommerceApp extends Component {
render() {
return <Router>
<div className="container-fluid">
<div className="row">
<div className="col-2">
<Link className="m-2 btn btn-block btn-primary"
to="/products">商品列表</Link>
<Link className="m-2 btn btn-block btn-primary"
to="/suppliers">供应商列表</Link>
</div>
<div className="col">
<Switch>
<Route path="/products" component={ ProductList} />
<Route path="/suppliers" component={ SupplierList } />
<Route render={ () =>
<h5 className="bg-info text-white m-2 p-2">未找到匹配内容</h5>
} />
</Switch>
</div>
</div>
</div>
</Router>
}
}
在这个示例中，用户可以通过点击导航链接查看商品列表或供应商列表。如果输入的 URL 不匹配
/products
或
/suppliers
，则会显示“未找到匹配内容”的提示信息。
11.2 旧 URL 重定向
随着应用的发展，可能会有一些旧的 URL 不再直接处理，需要将它们重定向到新的 URL。例如，电商应用中旧的商品分类 URL 不再使用，需要重定向到新的商品列表页面。
import React, { Component } from "react";
import { BrowserRouter as Router, Link, Route, Switch, Redirect }
from "react-router-dom";
import { ProductList } from "./ProductList";
import { SupplierList } from "./SupplierList";
export class EcommerceAppWithRedirect extends Component {
render() {
return <Router>
<div className="container-fluid">
<div className="row">
<div className="col-2">
<Link className="m-2 btn btn-block btn-primary"
to="/products">商品列表</Link>
<Link className="m-2 btn btn-block btn-primary"
to="/suppliers">供应商列表</Link>
<Link className="m-2 btn btn-block btn-primary"
to="/old/category">旧分类链接</Link>
</div>
<div className="col">
<Switch>
<Route path="/products" component={ ProductList} />
<Route path="/suppliers" component={ SupplierList } />
<Redirect from="/old/category" to="/products" />
<Route render={ () =>
<h5 className="bg-info text-white m-2 p-2">未找到匹配内容</h5>
} />
</Switch>
</div>
</div>
</div>
</Router>
}
}
在这个示例中，当用户点击“旧分类链接”时，会自动重定向到商品列表页面。
12. 总结与最佳实践
通过前面的介绍，我们了解了 React 中 URL 路由的多种技术，包括 URL 匹配、属性限制匹配、多 URL 指定、正则表达式匹配、单一路由匹配、重定向以及导航链接的渲染等。以下是一些使用 React URL 路由的最佳实践总结：
-
合理使用
exact
属性
：在需要精确匹配 URL 时，使用
exact
属性可以避免过度匹配，确保每个
Route
只匹配预期的 URL。
-
注意
Redirect
组件的顺序
：选择性
Redirect
组件必须放在非选择性重定向之前，以确保它们能被正确执行。
-
保持正则表达式简单
：在使用正则表达式进行 URL 匹配时，尽量保持表达式简单易懂，避免使用过于复杂的正则表达式，以免影响代码的可读性和可维护性。
-
使用
NavLink
指示活动路由
：
NavLink
组件可以为用户提供当前活动路由的视觉反馈，增强用户体验。但要注意使用
exact
属性来避免不必要的高亮显示。
通过遵循这些最佳实践，我们可以在 React 应用中实现高效、灵活且易于维护的 URL 路由系统，为用户提供更好的导航体验。
希望本文的内容能帮助你更好地理解和应用 React 中的 URL 路由技术，在实际项目中发挥出它们的优势。如果你在实践过程中遇到任何问题，欢迎随时查阅相关文档或在社区中寻求帮助。
扫一扫
16
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
