react-router-dom v6中Route组件渲染子页面

在使用antd design中的Layout布局时，内容区需要根据不同的路由显示不同的内容，在react-router-dom v5中可以使用Route组件的render属性来实现，而v6中没有render属性，此时可以通过以下来实现：

import React from "react";
import { Routes, HashRouter, Route } from "react-router-dom";
import Login from "./pages/login";
import ILayout from "./pages/layout";
import Home from "./pages/home";
import ProductsList from "./pages/product";
import "./App.less";

function App() {
  return (
    <HashRouter>
      <Routes>
        <Route path="/login" element={<Login />}></Route>
        <Route
          path="/*"  /* 此处需加*号 */
          element={
            <ILayout>
              <Routes>
                <Route exact path="/home" element={<Home />} />
                <Route path="/productList" element={<ProductsList />} />
              </Routes>
            </ILayout>
          }
        ></Route>
      </Routes>
    </HashRouter>
  );
}

export default App;

ILayout组件

import React, { Component } from "react";
import { Layout, Menu } from "antd";
const { Header, Sider, Content } = Layout;

class ILayout extends Component {
  state = {
    collapsed: false
  }

  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed
    });
  }
   render() {
       return (
          <>
            <Layout>
                {/* 侧边菜单栏 */}
              <Sider trigger={null} collapsible collapsed={this.state.collapsed}>
                <Menu
                  theme="dark"
                  mode="inline"
                  defaultSelectedKeys={["home"]}
                  items={menuItems}
                />
              </Sider>
              <Layout className="site-layout">
                {/* 右边头部 */}
                <Header className="site-layout-background">
                  {React.createElement(
                    this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined,
                    {
                      className: "trigger",
                      onClick: this.toggle,
                    }
                  )}
                </Header>
                {/* 右边内容区 */}
                <Content className="site-layout-background">
                  {this.props.children}  
                </Content>
              </Layout>
            </Layout>
          </>
        );
    }
}
export default ILayout;