如何使用React HashRouter与Apollo Client渲染类组件，解决路由跳转无内容问题

开发者阿泽

2026-9-28

问题排查与解决方案

1. 修复App.js中Switch内的非法字符

你当前App.js的<Switch>代码块中，/books路由行末尾多了一个多余的分号，Switch组件仅支持<Route>、<Redirect>作为直接子节点，多余的分号会被识别为无效文本节点，打断路由匹配逻辑，导致所有路由无法命中，这是页面跳转后无内容的核心原因。
修改后代码：

<Switch>            
  <Route exact path="/bikes" component={Bikes} />
  <Route exact path="/books" component={Books} />            
</Switch>

2. 修正Apollo Client请求地址错误

Index.js中初始化Apollo Client的uri参数前多了一个空格，会导致数据请求发送到错误地址，修正如下：

export const client = new ApolloClient({
  uri: 'http://localhost:4000/',
  cache: new InMemoryCache()
});

3. 为异步请求添加异常捕获

你当前所有Apollo请求都没有异常捕获逻辑，若后端接口返回错误会导致状态更新失败，建议给所有componentDidMount中的异步逻辑添加try/catch，方便定位问题，以Bikes.js为例：

componentDidMount = async ()=>{
  try {
    const response = await client.query({
        query: GET_QUERY,
        variables: CATEGORY_VAR
    })
    this.setState({
        bikesArt:response.data.category.products
    })
  } catch (err) {
    console.error('获取单车类产品数据失败:', err)
  }
}

4. 确认react-router-dom版本匹配

你当前使用的路由写法是react-router-dom v5版本的规范，如果你安装的是v6版本，会出现路由不生效且无报错的情况，可按以下两种方案处理：

降级到v5版本：执行npm i react-router-dom@5.3.4安装兼容版本
适配v6版本写法：
1. 将App.js中import { Switch, Route} from 'react-router-dom'替换为import { Routes, Route} from 'react-router-dom'
2. 将原Switch块替换为：
```
<Routes>            
  <Route path="/bikes" element={<Bikes />} />
  <Route path="/books" element={<Books />} />            
</Routes>
```
1. 移除Navbar.js导出时的withRouter包裹，v6版本已删除该API。