记录一次react-router 6版本的嵌套路由使用

刚开始了解react,对于嵌套路由，最开始写法是，哪里需要显示路由直接在哪个地方写，如下：

import React, { Component } from "react";
import { Link, Route, Routes } from "react-router-dom";
import { Layout } from "antd";
import "./style.scss";
import Recommendation from "./Recommendation";
import Ranking from "./Ranking";

const { Header, Footer, Content } = Layout;

class Home extends Component {
  state = {};
  render() {
    return (
      <Layout>
        <Header className="headerStyle">
          <Link to="/recommendation">Recommendation </Link>
          <Link to="/ranking"> Ranking</Link>
        </Header>
        <Content className="contentStyle">
          <Routes>
            <Route path="/recommendation" element={<Recommendation />} />
            <Route path="/ranking" element={<Ranking />} />
          </Routes>
        </Content>
        <Footer className="footerStyle">Footer</Footer>
      </Layout>
    );
  }
}

export default Home;

后面觉得这种情况分散不好管理，于是去查了查资料，发现react提供了<Outlet></Outlet>标签使用，将其用于父组件中可以为子路由的元素占位，并最终渲染子路由的元素。

import React, { Component } from "react";
import { Link, Outlet, Route, Routes, useRoutes } from "react-router-dom";
import { Layout } from "antd";
import "./style.scss";


const { Header, Footer, Content } = Layout;

class Home extends Component {
  state = {};
  render() {
    return (
      <Layout>
        <Header className="headerStyle">
          <Link to="/recommendation">Recommendation </Link>
          <Link to="/ranking"> Ranking</Link>
        </Header>
        <Content className="contentStyle">
          <Outlet />
        </Content>
        <Footer className="footerStyle">Footer</Footer>
      </Layout>
    );
  }
}

export default Home;

但是这样你改完后会发现，页面点击虽然能够进行路由切换，组件里面的内容根本不显示

这是因为需要在index.js中添加路由，以达到内容显示

import React from "react";
import ReactDOM from "react-dom/client";
import { HashRouter } from "react-router-dom";
import "./style/common.scss";
import Recommendation from "./music-config/Recommendation";
import Ranking from "./music-config/Ranking";
import { Route, Routes } from "react-router-dom";
import Home from "./music-config/Home";

// import App from "./App";
// import TodoHome from './frame-home/home'

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  // <React.StrictMode>
  <HashRouter>
    <Routes>
          //注意：这个地方是嵌套路由
      <Route path="/" element={<Home />}>
        <Route path="/recommendation" element={<Recommendation />} />
        <Route path="/ranking" element={<Ranking />} />
        <Route path="*" element={<p>未匹配到路由时，会跳转此处。</p>} />
      </Route>
    </Routes>
  </HashRouter>
  // </React.StrictMode>
);

未完待续。。