React Router(v5.3.4)嵌套组件URL重定向异常求助

问题出在你使用了相对路径作为Link的to属性值，React Router会基于当前页面的路由路径去拼接新路径，导致URL层级错误。

核心解决方案：使用绝对路径 #

把Link的to值改为以/开头的绝对路径，这样路由会从根路径开始匹配，不会基于当前路径拼接：

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

const Product = ({ product }) => {
  return (
    <Link to={`/product/${product.id}`}>
      {/* Product content */}
    </Link>
  );
};

export default Product;

为什么之前的写法不行？ #

• 当你写to={product/${product.id}}时，当前页面路径是/product/34，React Router会把新路径拼接为/product/34/product/35
• 改成to={${product.id}}后，新路径会被拼接为/product/34/35，本质还是相对当前路径的子路径，不是替换掉原有的商品ID参数

如果用路由跳转钩子（v5对应useHistory） #

注意v5中没有useNavigate，对应的是useHistory钩子，同样要使用绝对路径：

import React from 'react';
import { useHistory } from 'react-router-dom';

const Product = ({ product }) => {
  const history = useHistory();

  const handleClick = () => {
    history.push(`/product/${product.id}`);
  };

  return (
    <div onClick={handleClick}>
      {/* Product content */}
    </div>
  );
};

export default Product;

额外验证点 #

确认你的路由配置中存在正确的动态路由：

// App.js 或路由配置文件
import { BrowserRouter as Router, Route } from 'react-router-dom';
import ProductPage from './ProductPage';

function App() {
  return (
    <Router>
      <Route path="/product/:id" component={ProductPage} />
      {/* 其他路由 */}
    </Router>
  );
}

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