react嵌套路由(新V6.0.2)

最近看了一下react路由，发现网上的视频都是老版的，新版本的路由变化还是蛮大的，我就将我这次遇到的路由嵌套举个例子。
新的特性
重命名为

component/render被element替代

新API:Outlet

1:项目目录

2：创建router.js
代码

import React, { Component } from "react";
//引入路由
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
//引入组件
import Home from "./pages/Home";
import CityList from "./pages/CityList";
import News from "./pages/News";

class Routers extends Component {
    render() {
        return (
            <Router>
                <>
                    <Link to="/home">首页Link>
                    <Link to="/citylist">菜单Link>
                    <Link to="/home/news">嵌套Link>
//新版本路由写法
                    <Routes>
                        <Route path="/home" element={ />}>
                        <Route path="news" element={ />}>Route>

                        Route>
                        <Route path="/citylist" element={ />}>Route>

                    Routes>  
                
            Router>
        )
    }
}
export default Routers

3：App.js

import React from "react";
//引入配置好的路由组件
import Routers from './router'

function App() {
  return (
    <div className="App">
   <Routers/>
    div>
  );
}

export default App;

4：Home.js

import React, { Component } from 'react'
// 导入路由
import {  Outlet } from 'react-router-dom'
// import News from "../News";
export default class Home extends Component {
    render() {
        return (
            // <Router>
            <div>
            //老版本的路由写法不能实现效果
                {/* <Link to="/home/news">提交Link>*/}
                {/* <Routes> 
                    <Route path="/home/news" element={ />}>Route>
                Routes> */}
                // // 留给子组件News的出口
                <Outlet />
            div>
            // Router>
        )
    }
}

5:News.js

import React, { Component } from 'react'

export default class News extends Component {
    render() {
        return (
            <div>
               News
            div>
        )
    }
}

参考了一位知乎大佬的文章，附上链接react路由