在前两篇中，我们介绍了
React Router 和
路由的基础知识，以及如何在应用中使用
路由。在本篇中，我们将深入学习
React Router，并介绍一些更高级的用法。
## 动态
路由
在前面的教程中，我们已经学习了如何定义静态
路由。但是在实际开发中，我们通常需要处理动态
路由。例如，我们可能需要在 URL 中传递参数，以便根据参数来渲染不同的组件。
在
React Router 中，我们可以使用 `:param` 来定义动态
路由参数。例如，我们可以定义一个动态
路由 `/user/:id`，其中 `:id` 表示一个动态参数，表示用户的 ID。当浏览器访问 `/user/123` 时，
React Router 会自动将 `123` 作为参数传递给对应的组件。
下面是一个简单的例子：
```
jsx
import { Browser
Router as
Router,
Route, Link } from "
react-
router-dom";
function User({ match }) {
return <h1>Hello, {match
.params
.id}!</h1>;
}
function App() {
return (
<
Router>
<div>
<ul>
<li>
<Link to="/user/123">User 123</Link>
</li>
<li>
<Link to="/user/456">User 456</Link>
</li>
</ul>
<
Route path="/user/:id" component={User} />
</div>
</
Router>
);
}
```
在上面的例子中，我们定义了一个动态
路由 `/user/:id`，其中 `:id` 表示用户的 ID。当浏览器访问 `/user/123` 时，
React Router 会自动将 `123` 作为参数传递给 `User` 组件，并显示 `Hello, 123!`。
同样，当浏览器访问 `/user/456` 时，
React Router 会自动将 `456` 作为参数传递给 `User` 组件，并显示 `Hello, 456!`。
## 嵌套
路由
在实际开发中，我们经常需要在一个页面中嵌套多个组件。在
React Router 中，我们可以使用嵌套
路由来实现这个功能。
具体来说，我们可以在一个组件中定义多个 `<
Route>` 组件，从而实现嵌套
路由。例如，我们可以定义一个嵌套
路由 `/user/:id/posts`，其中 `:id` 表示用户的 ID，`posts` 表示用户的帖子列表。
下面是一个简单的例子：
```
jsx
import { Browser
Router as
Router,
Route, Link } from "
react-
router-dom";
function User({ match }) {
return (
<div>
<h1>Hello, {match
.params
.id}!</h1>
<ul>
<li>
<Link to={`${match
.url}/posts`}>Posts</Link>
</li>
</ul>
<
Route path={`${match
.path}/posts`} component={Posts} />
</div>
);
}
function Posts() {
return <h2>Posts</h2>;
}
function App() {
return (
<
Router>
<div>
<ul>
<li>
<Link to="/user/123">User 123</Link>
</li>
<li>
<Link to="/user/456">User 456</Link>
</li>
</ul>
<
Route path="/user/:id" component={User} />
</div>
</
Router>
);
}
```
在上面的例子中，我们定义了一个嵌套
路由 `/user/:id/posts`，其中 `:id` 表示用户的 ID，`posts` 表示用户的帖子列表。当浏览器访问 `/user/123/posts` 时，
React Router 会自动将 `123` 作为参数传递给 `User` 组件，并显示 `Posts` 组件。
##
路由守卫
在实际开发中，我们通常需要实现一些
路由守卫功能，例如登录验证、权限控制等。在
React Router 中，我们可以使用 `
Route` 组件的 `render` 属性来实现
路由守卫。
具体来说，我们可以定义一个高阶组件 `Auth
Route`，用来检查用户是否登录。如果用户已登录，则渲染对应的组件；否则，跳转到登录页面。
下面是一个简单的例子：
```
jsx
import { Browser
Router as
Router,
Route, Link, Redirect } from "
react-
router-dom";
function Auth
Route({ component: Component,
...rest }) {
const isAuthenticated = localStorage
.getItem("isAuthenticated");
return (
<
Route
{
...rest}
render={(props) =>
isAuthenticated ? (
<Component {
...props} />
) : (
<Redirect to={{ pathname: "/login", state: { from: props
.location } }} />
)
}
/>
);
}
function Home() {
return <h1>Welcome Home!</h1>;
}
function Login() {
const login = () => {
localStorage
.setItem("isAuthenticated", true);
};
return (
<div>
<h2>Login</h2>
<button onClick={login}>Login</button>
</div>
);
}
function App() {
return (
<
Router>
<div>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/login">Login</Link>
</li>
</ul>
<Auth
Route exact path="/" component={Home} />
<
Route path="/login" component={Login} />
</div>
</
Router>
);
}
```
在上面的例子中，我们定义了一个高阶组件 `Auth
Route`，用来检查用户是否登录。如果用户已登录，则渲染对应的组件；否则，跳转到登录页面。具体来说，我们首先从本地存储中检查用户是否已登录，然后根据检查结果来渲染对应的组件或跳转到登录页面。
## 总结
在本篇教程中，我们深入学习了
React Router，并介绍了一些更高级的用法。具体来说，我们学习了如何定义动态
路由、嵌套
路由和
路由守卫。
希望通过本篇教程，你已经掌握了
React Router 的高级用法，并能够在实际开发中灵活使用。
超级会员免费看
本文详细介绍了React中的路由概念，包括前端渲染与后端渲染的区别，重点讲解了`Route`组件的使用，如安装环境、组件介绍、参数化路由、前端渲染、url参数传递、重定向路由以及嵌套路由。通过实例展示了如何创建导航栏和跳转，以及如何通过`useParams`和`useSearchParams`获取和使用路由参数。
订阅专栏 解锁全文
扫一扫
101
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
