react-router v6.0嵌套路由

效果图

App.js

import React, { Component } from "react";
import { Route, Routes,Navigate } from "react-router-dom";
import Home from "./pages/Home"; //home是路由组件
import About from "./pages/About"; //about是路由组件
import Header from "./components/Header"; //header是一般组件
import MyNavLink from "./components/MyNavLink";
class App extends Component {
  render() {
    return (
      <div>
        <div className="row">
          <div className="col-xs-offset-2 col-xs-8">
            <Header a={1} />
          </div>
        </div>
        <div className="row">
          <div className="col-xs-2 col-xs-offset-2">
            {/* 在React中靠路由链接实现切换组件 --编写路由链接*/}
            <MyNavLink to="/about" a={1} b={2}>
              About
            </MyNavLink>
            <MyNavLink to="/home">Home</MyNavLink>
          </div>
          <div className="col-xs-6">
            <div className="panel">
              <div className="panel-body">
                <Routes>
                    <Route path="/about"  element={<About />} />
                    <Route path="/home/*" element={<Home />} /> //这个地方记得要写/home/*否则匹配不到子路由
                    <Route path="" element={<Navigate to ="/about" />}/>
                </Routes>
                {/* 注册路由 */}
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default App;

About.jsx

import React, { Component } from 'react';

class About extends Component {
    render() {
        // console.log('About组件收到的props是',this.props)
        return (
            <div>
                <h3>我是about内容</h3>
            </div>
        );
    }
}

export default About;

Home/News/index.jsx

import React, { Component } from 'react';

class Message extends Component {
    render() {
        return (
            <ul>
                <li>news001</li>
                <li>news002</li>
             </ul>
        );
    }
}

export default Message;

Home/Message/index.jsx

import React, { Component } from 'react';

class News extends Component {
    render() {
        return (
            <div>
                <ul>
                <li>
                    <a href="/message1">message001</a>&nbsp;&nbsp;
                </li>
                <li>
                    <a href="/message2">message002</a>&nbsp;&nbsp;
                </li>
                <li>
                    <a href="/message/3">message003</a>&nbsp;&nbsp;
                </li>
                </ul>
          </div>
        );
    }
}

export default News;

Home/index.jsx

import React, { Component } from "react";
import News from "./News";
import Message from "./Message";
import { Route, Routes,Navigate,Outlet} from "react-router-dom";
import MyNavLink from "../../components/MyNavLink";
class Home extends Component {
  render() {
    return (
      <div>
        <div>
          <h3>我是Home的内容</h3>
        </div>
        <div>
          <h2>Home组件内容</h2>
          <div>
            <ul className="nav nav-tabs">
              <li>
                <MyNavLink to="/home/news">News</MyNavLink>
              </li>
              <li>
                <MyNavLink to="/home/message">Message</MyNavLink>
              </li>
            </ul>
                <Routes>
                    <Route path="news"  element={<News />} />
                    <Route path="message" element={<Message />} />
                    <Route path="" element={<Navigate to ="/home/news" />}/>
                </Routes>
          </div>
          <Outlet />
        </div>
      </div>
    );
  }
}

export default Home;