React+Redux+Router组件不渲染求助：Sample组件无法挂载

我来帮你梳理几个最可能的原因，你可以逐一排查：

• 组件导入环节出错
  先仔细核对Sample组件的导入路径和导出方式：

  • 是不是路径拼写错误？比如把./components/Sample写成了./component/Sample，或者大小写不匹配（比如Sample.jsx写成了sample.jsx，部分环境会区分大小写）；
  • 导出/导入方式是否对应？如果Sample是命名导出（export const Sample = ...），导入时必须用import { Sample } from './path'；如果是默认导出（export default Sample），导入则是import Sample from './path'。搞错的话组件会是undefined，自然不会渲染，还可能不触发控制台报错。

• 路由匹配被拦截
  <Switch>组件是匹配到第一个符合条件的路由就停止，如果Sample的路由前面有更宽泛的路由（比如path="/"的路由没加exact属性），就会被前面的路由“抢”走匹配权。另外要确认路由的path和你实际访问的URL完全一致，比如有没有多打/少打斜杠，或者拼写错误。

• 路由组件的包裹方式错误
  确保Sample组件是用<Route>组件包裹在<Switch>里的，别直接把组件丢进去。举个反例：

  // 错误写法：直接放组件不会触发路由匹配
  <Switch>
    <Route path="/thisworks" component={() => <div>Works!</div>} />
    <Sample />
  </Switch>
  

  正确的写法应该是：

  <Switch>
    <Route path="/thisworks" component={() => <div>Works!</div>} />
    <Route path="/sample" component={Sample} />
    {/* 或者用render属性：<Route path="/sample" render={() => <Sample />} /> */}
  </Switch>
  

• 快速验证组件本身是否正常
  你可以先把Sample组件直接放在Root组件里（不通过路由），比如：

  const Root = () => (
    <div>
      <Sample /> {/* 直接渲染看是否显示 */}
      <BrowserRouter>
        {/* 原有路由... */}
      </BrowserRouter>
    </div>
  );
  

  如果这样能显示，说明组件本身没问题，问题肯定出在路由配置上；如果还是不显示，那就要检查组件内部是不是有逻辑错误（比如返回了null，或者条件渲染一直不满足）。

另外，给Sample组件加个控制台日志也能帮你快速定位：

const Sample = () => {
  console.log('Sample组件被调用了！');
  return <div>Sample内容</div>;
};

如果控制台没这条日志，说明组件根本没被触发，重点排查路由匹配和导入；如果有日志但页面看不到，就检查样式（比如display: none）或者组件返回内容是否为空。

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