点击导航链接后页面未切换，React组件渲染异常求助

点击导航链接后，对应页面组件无法显示。目前通过window.location.pathname判断路径切换组件，路径检测正常，但仅含h1标签的页面组件始终不渲染，重复操作问题依旧，确认是代码错误。

相关代码 #

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1 id="root"></h1>
  
</body>
</html>

JavaScript代码 #

import React from "react";
import Nav from "./Navbar/Nav";
import Company from "./Navbar/Screens/Company";
import Home from "./Navbar/Screens/Home";
import About from "./Navbar/Screens/About";
import Gallary from "./Navbar/Screens/Gallary";
import Contect from "./Navbar/Screens/Contact";
import Others from "./Navbar/Screens/Others";

export default function App(){
     let component 
     switch (window.location.pathname) {
         case "/Company":
             component:<Company />
             break;  
         case "/Home":
                 component:<Home />
                 break;
         case "/About":
             component:<About />
             break;
         case "/Contect":
             component:<Contect />
             break;
         case "/Gallary":
             component:<Gallary />
             break;
         case "/Others":
             component:<Others />
             break;
         default:
             component:<Company/>
             break;
     }


     return(
         <div>
             <>
                 <Nav /> 
                 {component}
             </>
         </div>
     )
 }

问题修复 #

核心错误：赋值语法错误 #

你在switch语句中给component赋值时，错误使用了对象属性的冒号:，而非JavaScript的赋值运算符=。这导致component变量始终为undefined，自然无法渲染任何组件。

修复后的switch代码：

switch (window.location.pathname) {
    case "/Company":
        component = <Company />;
        break;  
    case "/Home":
        component = <Home />;
        break;
    case "/About":
        component = <About />;
        break;
    case "/Contect":
        component = <Contect />;
        break;
    case "/Gallary":
        component = <Gallary />;
        break;
    case "/Others":
        component = <Others />;
        break;
    default:
        component = <Company/>;
        break;
}

额外优化建议 #

1. 拼写统一：导入的Contect对应文件是Contact，拼写不一致，建议统一文件名和变量名，避免后续出现找不到组件的问题。
2. 使用专业路由库：直接依赖window.location.pathname的方式无法自动监听路径变化，页面不会在路径改变时重新渲染。建议使用react-router-dom来实现路由功能，这是React项目中处理导航的标准方案，能自动管理路由状态和组件渲染。

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