react 二级路由默认跳转children
（原创实用版）
1.React 二级路由的概念和作用 
2.React 二级路由的跳转方式 
3.React 二级路由的默认跳转 children 属性 
4.React 二级路由的应用实例
正文
一、React 二级路由的概念和作用
React Router 是一个用于构建 React 应用程序导航的库。在 React Router 中，路由被分为多个级别，以满足不同的导航需求。二级路由是指在顶层路由（一级路由）之下的子路由，它可以让用户在访问一个页面时，进一步导航到更详细的内容页面。
二、React 二级路由的跳转方式
React 提供了两种方式来实现二级路由的跳转：一种是使用 Link 组件，另一种是使用 history 对象。
1.使用 Link 组件
在 React 组件中，可以使用 Link 组件来实现二级路由的跳转。Link 组件接受 to 属性，该属性指定要跳转的路由路径。当用户点击 Link 组件时，将会触发跳转。
```jsx 
<Link to="/path/to/child">跳转到二级路由</Link> 
```
2.使用 history 对象
在 React 组件中，可以通过调用 history 对象的 pushState 方法来实现二级路由的跳转。pus
hState 方法接受一个包含 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 
<Route path="/path/to/child" component={() => <div>二级路由</div>} children={<Route path="1" component={() => <div>子路由 1</div>} />} /> 
```
四、React 二级路由的应用实例
假设我们有一个博客应用程序，其中包含一个博客列表页面（/blogs）和一个博客详情页面（/blogs/1）。在这个例子中，/blogs 页面是一级路由，而 /blogs/1 是二级路由。
```jsx 
import React from "react"; 
import { Route, Link, BrowserRouter as Router } from "react-router-dom";
function App() { 
  return ( 
    <Router> 
      <div> 
        <nav> 
          <ul> 
            <li> 
              <Link to="/blogs">博客列表</Link> 
            </li> 
          </ul> 
        </nav>
        <Route path="/blogs" component={Blogs} /> 
        <Route path="/blogs/:id" component={BlogDetail} /> 
      </div> 
    </Router> 
  ); 
}
function Blogs() { 
  return ( 
    <div> 
      <h2>博客列表</h2> 
      <ul> 
        <li> 
          <Link to="/blogs/1">博客详情 1</Link> 
        </li> 
        <li> 
          <Link to="/blogs/2">博客详情 2</Link> 
        </li> 
      </ul> 
    </div> 
  ); 
}
function BlogDetail() { 
  return ( 
    <div> 
      <h2>博客详情</h2> 
      <p>这是博客详情页面。</p> 
    </div> 
react router v6 文档  ); 
}
export default App; 
```
在这个例子中，当我们访问 /blogs 页面时，可以看到博客列表和两个链接，分别指向 /blogs/1 和 /blogs/2。