React Router Dom组件显示异常：Layout与Home互斥显示求助

问题根源 #

你的代码存在三个关键问题：

1. <Routes>匹配规则：v6中<Routes>只会渲染第一个匹配路径的路由，同路径的两个路由只会生效一个，导致Home和Layout无法同时显示。
2. 属性错误：v6中路由渲染组件的属性是element，而非v5的component/Component，你的写法不兼容v6。
3. 结构错误：Layout作为布局组件，应该作为父路由容器，通过嵌套路由渲染Home，而非和Home同级路由。
   另外，v6已移除exact属性，默认就是精确匹配，无需添加。

修正步骤 #

1. 修正App.js路由结构

将Layout设为父路由，Home作为其子路由，使用element属性传递组件：

//App.js file
import React from "react";
import { Route, Routes } from "react-router-dom";
import Layout from './components/Layout';
import Home from './components/Home';
import './App.scss';

function App() {
  return (
    <Routes>
      {/* Layout作为父路由，嵌套子路由 */}
      <Route path='/' element={<Layout />}>
        {/* Home作为子路由，路径继承父路由的/，渲染到Layout的Outlet中 */}
        <Route index element={<Home />} />
      </Route>
    </Routes>
  );
}

export default App;

2. 修改Layout组件，添加Outlet

在Layout中导入Outlet，用来展示子路由（比如Home）的内容，示例：

// Layout.jsx
import React from "react";
import { Outlet } from "react-router-dom";

const Layout = () => {
  return (
    <div className="layout">
      {/* 这里是Layout的固定内容，比如导航栏、侧边栏 */}
      <header>网站导航</header>
      {/* Outlet用来渲染子路由组件（比如Home） */}
      <main>
        <Outlet />
      </main>
      <footer>页脚信息</footer>
    </div>
  );
};

export default Layout;

额外说明 #

• 确保你的react-router-dom版本是v6，如果之前安装了v5，执行npm install react-router-dom@latest升级到最新v6版本。
• 需要在index.js中用<BrowserRouter>包裹<App />，示例：

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

内容的提问来源于stack exchange，提问作者Varun Kumar