Electron中使用react-router v5时NavLink无法切换页面组件的问题

你的代码核心问题在于根路径路由未添加exact属性，导致Switch组件始终匹配到Homepage，无法切换到其他页面。

问题原因 #

Switch组件会从上到下匹配第一个符合条件的路由，而根路径/如果不加exact，会匹配所有以/开头的路径（比如/contact、/about），因此无论点击哪个NavLink，页面都会一直显示Homepage。

修复方案 #

给根路径的Route添加exact属性，确保只有路径完全等于/时才渲染Homepage：

import * as React from "react";
import "./Navbar.scss";

import { HashRouter, Switch, Route, NavLink } from "react-router-dom";
import Homepage from "../../pages/Homepage/Homepage";
import Contact from "../../pages/Contact/Contact";
import About from "../../pages/About/About";

class Navbar extends React.Component {
  handleDirectPage = () => {};
  render(): React.ReactNode {
    return (
      <HashRouter>
        <ul>
          <li>
            <NavLink to="/" exact>
              Home
            </NavLink>
          </li>

          <li>
            <NavLink to="/contact">
              Contact
            </NavLink>
          </li>
          <li>
            <NavLink to="/about">
              About
            </NavLink>
          </li>
        </ul>
        <Switch>
          {/* 添加exact属性，限制仅完全匹配/时渲染Homepage */}
          <Route path="/" exact>
            <Homepage />
          </Route>
          <Route path="/contact">
            <Contact />
          </Route>
          <Route path="/about">
            <About />
          </Route>
        </Switch>
      </HashRouter>
    );
  }
}

export default Navbar;

额外说明 #

• Electron环境下使用HashRouter是正确选择，因为本地文件协议不支持BrowserRouter的HTML5 History模式，无需修改Router类型。
• NavLink上的exact属性可以保留（针对根路径），也可以移除，因为Route的exact已经控制了匹配逻辑，不影响功能。

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