React Router Dom v4首页Link组件失效问题求助

嗨，这个问题我之前也遇到过，帮你分析下原因和解决办法：

核心问题 #

你的路由配置里缺少了根路径（/）对应的Route规则。当你在首页时，<Switch>组件从上到下匹配，找不到对应/的路由，虽然导航栏（Nav）能正常显示，但路由的状态管理会出现异常，导致Link组件无法正常触发跳转。而其他页面（比如/login、/tutorials）有对应的Route，路由状态正常，所以Link能正常工作。

解决方案 #

1. 补充首页路由配置 #

在<Switch>的最后添加根路径的Route，作为默认匹配项（因为Switch会优先匹配前面的规则，最后匹配根路径不会影响其他路由）：

class App extends React.Component {
  render() {
    return (
      <BrowserRouter>
        <div>
          <Nav />
          <Switch>
            <Route path="/tutorials/:id" component={TutorialPost} />
            <Route path="/login" component={Login} />
            <Route path="/register" component={Register} />
            <Route path="/tutorials" component={Tutorials} />
            {/* 新增首页路由，替换Home为你的实际首页组件 */}
            <Route path="/" component={Home} />
          </Switch>
        </div>
      </BrowserRouter>
    );
  }
}

2. 可选：添加精确匹配（更严谨） #

如果你想确保只有访问/时才渲染首页组件，避免其他子路径意外匹配，可以加上exact属性：

<Route exact path="/" component={Home} />

额外排查点 #

虽然你说其他页面的Link正常，但还是可以确认下Nav组件里的Link写法是否正确，要使用绝对路径：

// 正确写法
<Link to="/login">登录</Link>

// 错误写法（相对路径，仅在特定场景生效）
<Link to="login">登录</Link>

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