React中嵌套路由不显示的问题

问题遇到的现象和发生背景

使用React，要实现嵌套路由，Home为父路由，News为子路由，
使用React，在项目根目录下有：src文件夹，在src中有pages文件夹，在pages中有News文件夹，下有index.js,代码为：

   import React from 'react'

  export default class News extends React.Component {
    render(){
        return( 
            <div style={{backgroundColor:'green',padding:10}}>
                这是News组件的内容，它是子路由的内容
            </div>
        )
     }
}

使用React，在项目根目录下有：src文件夹，在src中有pages文件夹，在pages中有Home文件夹，下有index.js,代码为：

import React from 'react'

import {BrowserRouter as Router,Route,Routes} from 'react-router-dom'

import News from '../News'  

export default class Home extends React.Component {
    render(){
        return(
            
                <div style={{backgroundColor:'skyblue',padding:10}}>
                    首页
                    <Routes>
                        <Route path = '/home/news' element={<News/>}></Route>
                    </Routes>
                </div>
          )
    }
}

在src目录下有app.js，代码为：

import './App.css';


import {BrowserRouter as Router,Route,Link,Routes} from 'react-router-dom'
import {Button} from 'antd-mobile'

// 导入首页和城市选择两个组件（页面）
import Home from './pages/Home'
import CityList from './pages/CityList'
import React from 'react';

function App() {
    return (
    <Router>
        <div className="App">
        <ul>
              <li><Link to='/home'>首页</Link></li>
              <li><Link to='/citylist'>城市选择</Link></li>
        </ul>
        {/* 配置路由 */}
        <Routes>
              <Route path='/home' element={<Home/>}/>
              <Route path='/citylist' element = {<CityList/>}/>
        </Routes>
        </div>
    </Router>

  );
}

export default App;

运行程序后，http://localhost:3000/home下显示正确，在网址后面加上news,http://localhost:3000/home/news,却没有显示子路由中的内容：“这是News组件的内容，它是子路由的内容”，请问问题在哪里，如何修改啊

问题相关代码，请勿粘贴截图

运行结果及报错内容

我的解答思路和尝试过的方法

我想要达到的结果

```bash

```bash

```c

```

你的 <Routes> 这一层去掉 <Route> element 换成 component直接调用对应的组件名称 试一下

我也遇到这个问题，请问您的这个问题解决了吗？欢迎交流