18 | React Router（2）：参数定义，嵌套路由的使用场景-深入学习React实战进阶

当前位置:　首页>> 技术小册>> 深入学习React实战进阶

### 18 | React Router（2）：参数定义与嵌套路由的使用场景

在React应用开发中，路由管理是一个至关重要的环节，它决定了应用页面间的导航逻辑与数据传递方式。React Router作为React生态中最为流行的路由库之一，为开发者提供了强大的路由管理能力。本章节将深入探讨React Router中的参数定义以及嵌套路由的使用场景，帮助读者在构建复杂React应用时能够更加灵活地处理路由逻辑。

#### 一、参数定义：动态路由与查询参数

在Web应用中，经常需要根据URL的不同部分来动态加载不同的内容或执行不同的操作。React Router通过动态路由（Dynamic Routing）和查询参数（Query Parameters）两种方式来实现这一需求。

##### 1.1 动态路由

动态路由允许我们在路由路径中嵌入变量，这些变量可以根据URL的变化而变化，从而允许我们根据这些变量加载不同的组件或数据。在React Router v6中，我们可以使用`:paramName`的语法来定义动态路由参数。

**示例**：

假设我们有一个博客应用，需要根据文章ID来显示不同的文章内容。我们可以在路由配置中这样定义动态路由：

```jsx
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './Home';
import Article from './Article';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/articles/:articleId" element={<Article />} />
      </Routes>
    </Router>
  );
}

export default App;
```

在上述代码中，`:articleId`即为动态路由参数。当URL匹配`/articles/123`时，React Router会将`123`作为`articleId`的值传递给`<Article />`组件。但是，直接这样定义，`<Article />`组件并不会自动接收到`articleId`参数。为了获取这个参数，我们需要使用`useParams`钩子。

**在Article组件中使用`useParams`**：

```jsx
import { useParams } from 'react-router-dom';

function Article() {
  let { articleId } = useParams();

// 根据articleId加载文章内容
  // ...

return <div>Article {articleId} Content</div>;
}

export default Article;
```

##### 1.2 查询参数

与动态路由不同，查询参数（也称为URL搜索参数）位于URL的`?`之后，并以键值对的形式出现，如`/search?query=react`。查询参数不会改变路由的匹配规则，但可以用于在客户端和服务器之间传递额外的信息。

在React Router中，我们可以使用`useSearchParams`钩子来读取和修改查询参数。

**示例**：

```jsx
import { useSearchParams } from 'react-router-dom';

function SearchPage() {
  let [searchParams, setSearchParams] = useSearchParams();

// 假设我们有一个查询参数query
  let query = new URLSearchParams(searchParams).get('query') || '';

// 假设我们有一个函数来更新查询参数
  const handleSearchChange = (event) => {
    setSearchParams({ query: event.target.value });
  };

return (
    <div>
      <input type="text" value={query} onChange={handleSearchChange} />
      {/* 根据query加载搜索结果 */}
    </div>
  );
}

export default SearchPage;
```

#### 二、嵌套路由的使用场景

嵌套路由允许我们在一个路由组件内部定义更多的子路由，这些子路由会基于父路由的路径进行扩展。这在构建具有复杂导航结构的Web应用时非常有用，比如一个包含多个页面的博客文章详情页，或者一个具有多级菜单的管理后台。

##### 2.1 场景示例：博客文章详情页

假设我们的博客应用不仅显示文章列表，还允许用户点击文章进入详情页，而详情页内又包含评论列表和评论表单。这时，我们就可以使用嵌套路由来实现这一需求。

**路由配置**：

```jsx
<Routes>
  <Route path="/articles" element={<Articles />}>
    <Route index element={<ArticleList />} />
    <Route path=":articleId" element={<ArticleDetail />}>
      <Route index element={<ArticleContent />} />
      <Route path="comments" element={<Comments />} />
    </Route>
  </Route>
</Routes>
```

在这个配置中，`/articles`是父路由，它有一个子路由`<Articles />`用于渲染文章列表。当URL匹配`/articles/:articleId`时，`<ArticleDetail />`组件被渲染作为子路由的容器，它内部又定义了两个子路由：`<ArticleContent />`用于显示文章内容（默认路由），而`<Comments />`则用于显示评论。

**注意**： 在React Router v6中，默认路由需要使用`index`属性来指定，而不是像之前版本那样使用`path="*"`或`path=""`。

##### 2.2 嵌套路由的实现细节

在`<ArticleDetail />`组件中，我们需要使用`Outlet`组件来渲染子路由对应的组件。`Outlet`是React Router v6中引入的一个新组件，用于在嵌套路由中渲染子路由的内容。

**ArticleDetail组件示例**：

```jsx
function ArticleDetail() {
  // 这里可以放置一些与文章详情页相关的逻辑
  // ...

return (
    <div>
      <h1>Article Detail</h1>
      {/* 使用Outlet渲染子路由的内容 */}
      <Outlet />
    </div>
  );
}

export default ArticleDetail;
```

通过这种方式，当URL变化时，React Router会根据当前的路由路径匹配到相应的组件，并在`<ArticleDetail />`组件内部的`<Outlet />`位置渲染出来。这样，我们就可以在父路由组件内部灵活地组织和管理子路由的渲染逻辑了。

#### 结语

通过本章节的学习，我们深入了解了React Router中的参数定义方式，包括动态路由和查询参数，以及它们在实际应用中的使用方法。同时，我们也探讨了嵌套路由的概念、使用场景以及实现细节，掌握了如何在React应用中构建复杂的路由结构。这些知识和技能将为我们构建功能丰富、结构清晰的React应用提供有力的支持。

该分类下的相关小册推荐：

React 进阶实践指南

剑指Reactjs

React全家桶--前端开发与实例(上)

ReactJS面试指南

React全家桶--前端开发与实例(下)