React Router链接点击无响应，路由无法切换问题求助

我看了你的代码，发现两个核心问题导致点击Link后路由没切换：

问题1：根路由未添加exact属性 #

在react-router-dom v5中，<Switch>组件会按从上到下的顺序匹配路由，只要路径的开头匹配就会渲染对应的组件。你的根路由path="/"没有加exact，所以所有路由（包括/page2、/page3）都会匹配到这个根路由，始终渲染Page1，后面的路由根本没机会生效。

问题2：Page3的路由路径写错了 #

你给Page3设置的path是/page2，和Page2的路径重复了，就算根路由的问题解决了，点击/page3的链接也找不到对应的路由组件。

修改后的App.js代码 #

import React from "react";
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Page1 from './pages/Page1';
import Page2 from './pages/Page2';
import Page3 from './pages/Page3';
import "./style.css";

export default function App() {
  return (
    <BrowserRouter>
      <Switch>
        {/* 添加exact属性，确保只有路径完全匹配/时才渲染Page1 */}
        <Route exact path="/" component={Page1 } />
        <Route path="/page2" component={Page2 } />
        {/* 修正Page3的路由路径为/page3 */}
        <Route path="/page3" component={Page3 } />
      </Switch>
    </BrowserRouter>
  );
}

补充说明 #

• exact属性的作用是强制路由进行完全匹配，只有当URL和path完全一致时才会渲染组件。
• <Switch>组件只会渲染第一个匹配到的路由，所以一定要把更具体的路由（比如/page2、/page3）放在根路由后面，避免被覆盖。

这样修改后，点击Link就能正常切换路由了。

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