Question 367517 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – when clicked, JS is taking mw to wrong url in backend (django)

when i click on link it is taking me to ‘/product/api/product/2’ URL but I have defined /api/product/str:pk/

for backend I’m using 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;

when I place my cursor on product link it is showing the correct URL, but when i click on that link it is taking to wrong pattern on backend server.

Main urls.py code :

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

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

django app URLs code :

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

2

Answers


  1. 0

    When you click on the product link, it’s directing you to /product/api/product/2 instead of /api/product/2.
    This could be due to the way you’ve configured your Django URLs or how you’re handling routing in your React application.

    Double-check your Django URL patterns to ensure that /api/product/str:pk/ is correctly defined, and also verify your React router setup to make sure it’s directing to the right URLs.If everything seems correct on the frontend and backend, you may need to inspect the network requests in your browser’s developer tools to see exactly what URL is being requested when you click on the product link. This can help pinpoint where the routing issue is occurring.

    Login or Signup to reply.
  2. 0

    Look below.

    Problem :-

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

    Given links point to /product/${product._id}. But in django you don’t have urls that start with /product. You only have urls start with /api.

    Answer :-

    Use links like below.

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

    Info :-

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



<Link to={`api/product/${product._id}`}>
 
// Are relative paths
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search