React路由匹配失败：点击产品无法跳转至ProductScreen问题

1. 检查App.js的路由配置 #

核心问题是路由未匹配到/product/2路径，首先确认是否为ProductScreen配置了动态参数路由：

• 若使用react-router-dom v6+：

import { Routes, Route } from 'react-router-dom';
import HomeScreen from './screens/HomeScreen';
import ProductScreen from './screens/ProductScreen';

function App() {
  return (
    <Routes>
      <Route path="/" element={<HomeScreen />} />
      {/* 必须用:id定义动态参数，匹配/product/任意数值的路径 */}
      <Route path="/product/:id" element={<ProductScreen />} />
    </Routes>
  );
}
export default App;

• 若使用react-router-dom v5及以下：

import { Switch, Route } from 'react-router-dom';
function App() {
  return (
    <Switch>
      <Route exact path="/" component={HomeScreen} />
      <Route path="/product/:id" component={ProductScreen} />
    </Switch>
  );
}

注意：不要写死/product/2这类固定路径，必须用:id作为动态参数占位符。

2. 检查HomeScreen的跳转链接 #

确保使用react-router-dom提供的Link组件跳转，而非普通<a>标签（避免页面刷新导致路由失效）：

import { Link } from 'react-router-dom';

// 产品列表项中的跳转逻辑
<Link to={`/product/${product._id}`}>
  <h3>{product.name}</h3>
</Link>

同时确认产品的_id/id字段值正确，生成的链接路径确实是/product/2。

3. 验证ProductScreen的参数接收逻辑 #

确保在ProductScreen中正确获取路由参数：

• v6+版本用useParams钩子：

import { useParams } from 'react-router-dom';
import { useEffect } from 'react';
import { fetchProduct } from '../actions/ProductAction';

function ProductScreen() {
  const { id } = useParams();
  useEffect(() => {
    // 传入参数获取对应产品详情
    fetchProduct(id);
  }, [id]);
  
  // 后续渲染逻辑
}
export default ProductScreen;

• v5版本通过props接收：

import { useEffect } from 'react';
import { fetchProduct } from '../actions/ProductAction';

function ProductScreen(props) {
  const { id } = props.match.params;
  useEffect(() => {
    fetchProduct(id);
  }, [id]);
}

4. 排查路由优先级问题 #

如果存在其他路由规则，比如/product（不带参数），需确保动态路由/product/:id放在该规则之后，避免被提前匹配拦截。

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