React Router Link组件点击不跳转无报错，是什么原因导致的？

问题根因 #

你遇到的问题核心是history实例被重复创建：
你在<Router>的history属性中直接内联调用createBrowserHistory()，每次父组件触发重渲染时，都会生成一个全新的history实例，原有路由的跳转状态会被完全清空，导致Link的跳转操作被重置，甚至触发全局Redirect回到/items，出现URL不变、组件异常卸载的表现。

如果你的项目使用的是react-router-dom v6版本，还存在API不兼容的问题：v6已经废弃了Switch组件替换为Routes，且原生Router不再直接接收history属性，需要用<BrowserRouter>或者<unstable_HistoryRouter>替代。从你提供的代码写法来看，大概率是v5版本，优先排查第一个问题。

修复方案 #

将history实例抽离到组件渲染逻辑之外，保证全局只初始化一次：

import { createBrowserHistory, Router, Switch, Route, Redirect } from 'react-router-dom';

// 抽离到组件外部，仅初始化一次
const history = createBrowserHistory();

function App() {
  return (
    <Router history={history}>
      <Switch>
        <Route path="/items/:itemId">
          <Item />
        </Route>
        <Route exact path="/items">
          <Items />
        </Route>
        <Redirect to="/items" />
      </Switch>
    </Router>
  );
}

如果因业务逻辑必须将history定义在组件内部，使用useMemo缓存实例避免重复生成：

const history = useMemo(() => createBrowserHistory(), []);

内容的提问来源于stack exchange，提问作者Gergő Horváth