Невозможно использовать динамические маршруты с react router и django

Я создаю приложение для системы онлайн-обзора вакансий, используя react как frontend и django как backend. Я также использовал django rest framework для создания собственного api. Приложение содержит информацию обо всех кандидатах, которые подали заявки, и когда мы нажимаем на кандидата, оно должно показывать информацию об этом конкретном кандидате на отдельной странице. Я застрял на том, как создать динамические маршруты, используя react и django. Я думал, что проблема в "/" в урлах, но я перепробовал все комбинации, но ничего не получается. Когда я перехожу по url с id кандидата, в консоли нет предупреждения или ошибки.

urls.py приложения API

from django.urls import path
from . import views

urlpatterns = [
    path('', views.getRoutes, name="routes"),
    path('candidates/', views.getCandidates, name="candidates"),
    path('candidates/<str:pk>/', views.getCandidate, name="candidate"),
    path('candidates/add/', views.createCandidate, name="create-candidate"),
]

urls.py основного проекта

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

КодApp.js без учета импортов

<BrowserRouter>

  <div className="container dark">
    <div className="app">
      <Header />

      <Routes>

        <Route path="/" element={<CandidatesListPage />} >
          <Route path="/candidates/:id" element={<CandidatePage />} />
          <Route path="/candidates/add/" element={<CreateCandidate />} />
        </Route>

      </Routes>
      <Footer />
    </div>
  </div>
</BrowserRouter>

CandidateListPage(Page), которая отображает детали всех кандидатов и где каждый candidateItem(компонент) имеет ссылку на кандидатскую Page(Page), которая должна показать детали этого конкретного кандидата (динамические маршруты).

Код списка кандидатов

import React, { useState, useEffect } from 'react'
import CandidateItem from '../components/CandidateItem'


const CandidatesListPage = () => {

let [candidates, setCandidates] = useState([])

useEffect(() => {
    getCandidates()
}, [])


let getCandidates = async () => {
    console.log("hi p")
    let response = await fetch('/candidates/')

    let data = await response.json()
    console.log(data)
    setCandidates(data)
}

return (
    <div className="candidates">
        <div className="candidates-header">
            <h2 className="candidates-title"> hiii candidates</h2>
            <p className="candidates-count">{candidates.length}</p>
        </div>

        <div className="candidates-list">
            {candidates.map((candidate, index) => (
                <CandidateItem key={index} candidate={candidate} />
                
            ))}
        </div>
    </div>
     )
    }

    export default CandidatesListPage

Код кандидатаItem

const CandidateItem = ({ candidate }) => {
return (
    <Link to={`/candidates/${candidate.id}/`}>
        <div className="candidates-list-item" >
            <h3>{candidate.id}</h3>
            <h3>{candidate.full_name}</h3>
            <p>{candidate.email}</p>
            <p>{candidate.phoneNumber}</p>
            <p>{candidate.location}</p>
            <p>{candidate.country}</p>
        </div>

    </Link>
    
   )
  }

  export default CandidateItem

Код страницы кандидата

const CandidatePage = () => {
const {candidateid} = useParams()

return (
  <div className='container my-10'>
    <h1>Candidate Page</h1>
    <p>{candidateid}</p>
    {/* <Outlet/> */}
   </div>
 )
}

export default CandidatePage

views.py приложения API

@api_view(['GET'])
def getCandidates(request):

    candidates = Candidate.objects.all()
    print(candidates)
    serializer = CandidateSerializer(candidates,many=True)
    return Response(serializer.data)


@api_view(['GET', 'PUT', 'DELETE'])
def getCandidate(request, pk):

    candidate = Candidate.objects.get(id=pk)
    print(candidate,"candidate page")
    serializer = CandidateSerializer(candidate)
    return Response(serializer.data)

Я также не был уверен в том, почему Outlet должен быть использован, как я видел в документации по react router dom. Я добавил hte proxy url в файл package.json как "proxy":"http://127.0.0.1:8000". Если есть какие-либо другие требования к коду, я предоставлю их.

Вернуться на верх