2024年3月31日发(作者：)

react 二级路由默认跳转children

（原创实用版）

目录

二级路由的概念和作用

二级路由的跳转方式

二级路由的默认跳转 children 属性

二级路由的应用实例

正文

一、React 二级路由的概念和作用

React Router 是一个用于构建 React 应用程序导航的库。在 React

Router 中，路由被分为多个级别，以满足不同的导航需求。二级路由是

指在顶层路由（一级路由）之下的子路由，它可以让用户在访问一个页面

时，进一步导航到更详细的内容页面。

二、React 二级路由的跳转方式

React 提供了两种方式来实现二级路由的跳转：一种是使用 Link 组

件，另一种是使用 history 对象。

1.使用 Link 组件

在 React 组件中，可以使用 Link 组件来实现二级路由的跳转。Link

组件接受 to 属性，该属性指定要跳转的路由路径。当用户点击 Link 组

件时，将会触发跳转。

```jsx

跳转到二级路由

```

2.使用 history 对象

第 1 页 共 5 页

在 React 组件中，可以通过调用 history 对象的 pushState 方法

来实现二级路由的跳转。pushState 方法接受一个包含 pathname 属性的

对象，pathname 属性指定要跳转的路由路径。

```jsx

import React from "react";

import { pushState } from "react-router-dom";

function handleClick() {

pushState("/path/to/child", null, "替换状态");

}

```

三、React 二级路由的默认跳转 children 属性

在 React Router 中，二级路由可以通过 children 属性来指定要跳

转的子路由。当一个路由组件被渲染时，如果它的 children 属性不为空，

那么将默认跳转到 children 属性指定的子路由。

```jsx

二级路由

} children={
子路由

1

} />} />

```

四、React 二级路由的应用实例

假设我们有一个博客应用程序，其中包含一个博客列表页面（/blogs）

和一个博客详情页面（/blogs/1）。在这个例子中，/blogs 页面是一级路

由，而 /blogs/1 是二级路由。

```jsx

第 2 页 共 5 页

import React from "react";

import { Route, Link, BrowserRouter as Router } from

"react-router-dom";

function App() {

return (

);

}

function Blogs() {

return (

第 3 页 共 5 页

博客列表

  • 博客详情 1

  • 博客详情 2

);

}

function BlogDetail() {

return (

博客详情

这是博客详情页面。

);

}

export default App;

第 4 页 共 5 页

```

在这个例子中，当我们访问 /blogs 页面时，可以看到博客列表和两

个链接，分别指向 /blogs/1 和 /blogs/2。

第 5 页 共 5 页