react-router v6嵌套路由的使用

最近一直在看react学习视频

在学习的过程中发现在嵌套路由章节出现了一些问题，根据老师的编写子级路由会报错(大概率是我自己的问题)。在这里卡了很久，也在网上搜索了很多办法也无效，作为初学者，为了解决这个问题也废了好大的劲。

现在有两个一级路由about和home，在home下面有个二级路由news,如下图

主文件index.jsx如下

import { Link,Route, Routes } from "react-router-dom";
import {React,  Suspense} from 'react'
import routes from './routes'

export default function Index() {
  return (
    <div>
        <div >
            <div >
                <div >
                    <h2>React Router Demo</h2>
                </div>
            </div>
        </div>
        <div >
        <Link to="/about">About</Link>
        <Link to = "/home">Home</Link>
        </div>
        <div>
        <Routes>
            {
            routes.map((route,i)=>{
                return (
                <Route key={i} path={route.path} element={
                    <Suspense fallback={<>...</>}>
                    <route.element/>
                    </Suspense>
                }/>
                )
            })
            }
        </Routes>
        
        </div>
    </div>
  )
}

路由文件routes.js如下

注意:home的路径一定要写成/home/*

import { lazy } from "react";

const routes = [
    {
        path:'/',
        exact:true,
        element:lazy(()=>import(("../../pages/About")))
    },
    {
        path:'/home/*',
        exact:true,
        element:lazy(()=>import(("../../pages/Home"))),
        children:[
            {
                path:'news',
                exact:true,
            },

        ]
    },
    {
        path:'/about',
        exact:true,
        element:lazy(()=>import(("../../pages/About")))
    },
];
export default routes;

Home.jsx的代码如下

import React from 'react'
import { Link, Outlet, Route, Routes} from 'react-router-dom'
import News from './News'
export default function Home() {
  return (
    <div>Home
      <Link to = "news">子路由</Link>
      <div>
        <h1>
          <Routes>
          <Route path='news' element={<News></News>}/>
          </Routes>
        </h1>
        
      </div>
    </div>
  )
}