При нажатии JS переводит mw на неправильный url в бекенде (django)

Когда я нажимаю на ссылку, она переводит меня на URL '/product/api/product/2', но я определил /api/product/str:pk/

для бэкенда я использую django.

import React from 'react'
import { Card } from 'react-bootstrap'
import Rating from './Rating'
import { Link } from 'react-router-dom'     // we are using this to load in the same page without reloading whole page

function Product({ product }) {
    return (
        <Card className="my-3 p-3 rounded">
            <Link to={`/product/${product._id}`}>       {/* here we are using link in place of a & to in place of 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;

Когда я навожу курсор на ссылку продукта, он показывает правильный URL, но когда я нажимаю на эту ссылку, она ведет к неправильному шаблону на внутреннем сервере.

Основной код urls.py :

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

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

код URL-адреса приложения django :

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'),
]

Когда вы нажимаете на ссылку продукта, она направляет вас на /product/api/product/2, а не на /api/product/2. Это может быть связано с тем, как вы настроили URL-адреса Django или как вы обрабатываете маршрутизацию в вашем React-приложении.

Дважды проверьте шаблоны URL Django, чтобы убедиться, что /api/product/str:pk/ определен правильно, а также проверьте настройку маршрутизатора React, чтобы убедиться, что он направляет на правильные URL. Если на фронтенде и бэкенде все выглядит правильно, вам может понадобиться просмотреть сетевые запросы в инструментах разработчика вашего браузера, чтобы увидеть, какой именно URL запрашивается при нажатии на ссылку продукта. Это поможет определить, где именно возникает проблема с маршрутизацией.

Смотрите ниже.

Проблема :-

<Link to={`/product/${product._id}`}>       {/* here we are using link in place of a & to in place of href */}

Данные ссылки указывают на /product/${product._id}. Но в django у вас нет урлов, начинающихся с /product. У вас есть только урлы, начинающиеся с /api.

Ответ :-

Используйте ссылки, как показано ниже.

<Link to={`/api/product/${product._id}`}>       {/* here we are using link in place of a & to in place of href */}

Информация :-

<Link to={`/api/product/${product._id}`}> 
 
// Are absolute paths



<Link to={`api/product/${product._id}`}>
 
// Are relative paths
Вернуться на верх