React-Router组件渲染异常：样式丢失、布局错位问题咨询

问题详情 #

1. 初始正常渲染状态 #

启动App组件时，<Sidebar>与<Chat>组件渲染符合预期，代码如下：

function App() {
  return (
    //BEM naming convention
    <div className="app">
      <div className="app__body">
        <Sidebar />
        <Chat />
        <Router>
          <Routes>
            <Route exact path="/arroz" element={<MainPage />} />
          </Routes>
        </Router>
      </div>
    </div>
  );
}

export default App;

2. 路由渲染MainPage时的异常 #

将<Sidebar>和<Chat>放入MainPage组件，通过路由路径/arroz渲染该组件时，出现样式丢失、组件仅占屏幕一小部分，且页面渲染了本不应显示的内容。MainPage代码如下：

import React from "react";
import Chat from "./Chat";
import Sidebar from "./Sidebar";

function MainPage() {
  return (
    <div className="mainPage">
      <Sidebar />
      <Chat />
    </div>
  );
}

export default MainPage;

注：未编写MainPage.css，组件默认display:block。

3. 可行的替代写法 #

以下写法可实现预期效果，但需明确异常原因：

function App() {
  return (
    //BEM naming convention
    <div className="app">
      <div className="app__body">
        <Sidebar />

        <Router>
          <Routes>
            <Route exact path="/rooms/:roomId" element={<Chat />} />
          </Routes>
        </Router>
      </div>
    </div>
  );
}

export default App;

渲染效果对比 #

• 异常渲染：Sidebar和Chat仅占据屏幕极小区域，样式错乱，页面存在额外冗余内容
• 预期渲染：Sidebar和Chat按布局规则占满对应区域，样式正常，无多余内容

异常原因分析 #

1. 样式依赖缺失：原Sidebar和Chat的样式依赖父容器.app__body的规则（比如flex布局、宽高占比设置），移到MainPage后，外层容器变为.mainPage，没有继承.app__body的样式属性，导致布局结构崩溃。
2. 重复组件渲染：初始App组件中，<Sidebar>和<Chat>直接渲染在.app__body内，同时路由组件也处于该容器中。访问/arroz时，除了路由渲染的MainPage里的Sidebar和Chat，App组件本身的Sidebar和Chat也会被渲染，这就是页面出现“本不应显示内容”的原因。
3. 路由结构不合理：初始写法中路由与Sidebar、Chat同级，导致路由内容与原有组件叠加；而替代写法将Sidebar保留在路由外，仅通过路由渲染Chat，既避免了重复渲染，又让Chat继承了.app__body的样式规则，因此能正常显示。

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