三级路由加载的时候，怎么渲染二级路由对应的组件

要在React中加载三级路由，并渲染二级路由对应的组件，你可以使用嵌套路由的概念。以下是一个简单的示例：

1. 首先，在你的二级路由组件中定义三级路由。例如，假设你有一个名为`Products`的二级路由组件，并且你想在这个组件中加载三级路由。你可以创建一个新的文件，命名为`Products.js`，并在其中定义三级路由。例如：

import React from 'react';
import { Route, Switch, Link } from 'react-router-dom';
import ProductList from './ProductList';
import ProductDetail from './ProductDetail';
import NotFound from './NotFound';

const Products = () => {
  return (
    <div>
      <h2>Products</h2>
      <ul>
        <li>
          <Link to="/products/list">Product List</Link>
        </li>
      </ul>
      <Switch>
        <Route exact path="/products/list" component={ProductList} />
        <Route path="/products/:id" component={ProductDetail} />
        <Route component={NotFound} />
      </Switch>
    </div>
  );
};

export default Products;

2. 在你的一级路由组件（通常是路由表组件）中，引入并渲染二级路由组件。例如，假设你的一级路由组件是`Routes.js`：

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Products from './components/Products';
import NotFound from './components/NotFound';

const Routes = () => {
  return (
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/products" component={Products} />
      <Route component={NotFound} />
    </Switch>
  );
};

export default Routes;

现在，当用户访问`/products`路径时，二级路由组件`Products`将被渲染。在`Products`组件中，当用户点击链接到`/products/list`或者其他以`/products/`开头的路径时，对应的三级路由组件将被渲染，例如`ProductList`或`ProductDetail`组件。