记录一次react-router 6版本的嵌套路由使用_reactrouter6嵌套路由-优快云博客

本文链接：https://blog.youkuaiyun.com/ae_pppppp/article/details/128937988

文章介绍了在React中从直接在组件内编写路由到使用嵌套路由和Outlet进行管理的转变过程。开始时，路由直接在组件内部定义，后来通过学习，使用Outlet作为子路由的占位符。然而，这导致页面内容不显示，问题在于需要在index.js中设置路由，包括主路由和子路由，这样才能正确切换和显示内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

刚开始了解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>
);

这样你就可以根据一个js路由数组文件，去便利生成route的dom;

或者你也可以直接用上述dom的形式来展现