React点击链接后Django后端接收URL路径错误问题求助

我用Django做后端、React做前端开发项目，现在碰到个问题：点击产品链接时，鼠标悬停显示的URL是对的，但实际请求却跳转到了/product/api/product/2，而我Django后端定义的接口路径是/api/product/<str:pk>/。

React产品组件代码 #

import React from 'react'
import { Card } from 'react-bootstrap'
import Rating from './Rating'
import { Link } from 'react-router-dom'     // 用这个实现单页跳转，不用刷新整个页面

function Product({ product }) {
    return (
        <Card className="my-3 p-3 rounded">
            <Link to={`/product/${product._id}`}>       {/* 用Link替代a标签，to替代href */}
                <Card.Img src={product.image} />
            </Link>

            <Card.Body>
                <Link to={`/product/${product._id}`}>
                    <Card.Title as="div">
                        <strong>{product.name}</strong>
                    </Card.Title>
                </Link>

                <Card.Text as="div">
                    <div className="my-3">
                        <Rating value={product.rating} text={`${product.numReviews} reviews`} color={'#f8e825'} />
                    </div>
                </Card.Text>

                <Card.Text as="h3">
                    ${product.price}
                </Card.Text>
            </Card.Body>
        </Card>
    )
}

export default Product;

Django主urls.py代码 #

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path("admin/", admin.site.urls),
    path("api/", include('base.urls')),
]

Django应用base/urls.py代码 #

from django.urls import path
from . import views


urlpatterns = [
    path('', views.getRoutes, name='routes'),
    path('products/', views.getProducts, name='products'),
    path('product/<str:pk>/', views.getProduct, name='product'),
]

这个问题本质是前端路由和后端API请求的路径混淆，具体修正步骤如下：

1. 修正后端API请求路径
   你在产品详情页组件里请求后端数据时，大概率用了相对路径（比如fetch(api/product/${productId})）。当页面处于/product/2这个前端路由下时，相对路径会自动拼接成/product/api/product/2，偏离了后端接口的正确路径。
   解决：把API请求改成绝对路径，比如：

   // 错误写法（相对路径）
   fetch(`api/product/${productId}`)
   // 正确写法（绝对路径，开头加/）
   fetch(`/api/product/${productId}`)
   

   开头的/表示从网站根路径出发，不管当前页面在哪个前端路由下，都会正确指向/api/product/2。

2. 确认前端路由配置
   确保react-router-dom的路由配置里，产品详情页的路由规则是path="/product/:id"，这样<Link to={/product/${product._id}}>才能正确跳转到前端的详情页面，再在该页面发起正确的API请求。

3. 验证后端接口可用性
   直接在浏览器地址栏访问/api/product/2，确认后端能返回正确的产品数据，排除后端接口本身的问题。

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