react-router-dom v6 嵌套路由

在React Router v6中，嵌套路由的使用方式略有不同。你可以使用`<Route>`组件来定义嵌套路由，并使用`element`属性指定要渲染的组件。下面是一个示例：

import { Route, Routes } from 'react-router-dom';
import { News } from './News';
import { Message } from './Message';

export const Home = () => {
  return (
    <div>
      <h3>Home</h3>
      <div>
        <ul className="nav nav-tabs">
          <li>
            <MyNavLink to="news">News</MyNavLink>
          </li>
          <li>
            <MyNavLink to="message">Message</MyNavLink>
          </li>
        </ul>
        {/* 注册路由 */}
        <Routes>
          <Route path="news" element={<News />} />
          <Route path="message" element={<Message />} />
        </Routes>
      </div>
    </div>
  );
};

在上面的代码中，我们使用`<Routes>`组件包裹了多个`<Route>`组件，每个`<Route>`组件定义了一个嵌套路由的路径和要渲染的组件。例如，当路径为"/news"时，会渲染`<News>`组件。这样，当用户访问"/news"时，`<News>`组件就会被渲染在嵌套路由的位置上。

希望这能回答你的问题！<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [React Router v6 路由配置，嵌套路由](https://blog.csdn.net/Snow_GX/article/details/123656412)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *3* [react-router-dom v6版本 嵌套路由](https://blog.csdn.net/jzh1359314792/article/details/126526047)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]