我正在做Django+React项目。我已经在Django中做了用户和项目模型。我可以访问项目列表页面，但是我一直在尝试访问项目页面。另一件事是，当我使用项目列表页面上的链接时，它会发送到http：//localhost：3000/projects/undefined。
项目列表页面：网站
项目页面：请访问：
控制台：

GET http://localhost:8000/api/projects/undefined/ 500 (Internal Server Error)

终点站：

base.models.Project.DoesNotExist: Project matching query does not exist.
[07/Dec/2022 20:47:10] "GET /api/projects/undefined/ HTTP/1.1" 500 101255

project.js

import { React, useState, useEffect } from 'react';
import axios from 'axios';
import {  Row, Col, Image, ListGroup } from 'react-bootstrap'
import './index.css'
import './bootstrap.min.css'
    

function Project() {
    // projects is the data, setprojects is a function that sets the value of projects
    const [project, setProject] = useState([]);
    
    useEffect(() => {

      const fetchproject = async({slug}) => { 
        try {
          const res = await axios.get(`http://localhost:8000/api/projects/${slug}`);
          setProject(res.data);
        } catch (err) {}
     };
     const slugData = window.location.href.split("/");
     
      fetchproject(slugData[slugData.length-1]);// add your slug value in this method as an argument
    }, []);
    
return (
    <div>
        <Row className="my-1 p-4">
            <Col xs={3} sm={2} md={2} lg={1} >
                <Image  className="p-1 rounded-circle bg-dark mx-auto d-block" style={{width: 100, height: 100}} src={project.image} fluid />

                <ListGroup variant="flush" >
                    <ListGroup.Item>
                        <h3 class="rfs-10">{project.name}</h3>
                    </ListGroup.Item>

                    <ListGroup.Item style={{fontSize: 12}}>
                        <p>{project.description}</p>
                    </ListGroup.Item>

                </ListGroup>
            </Col>
        </Row>
    </div>

)
}
export default Project;

App.js

import React from "react";
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import Header from './components/header'
import Footer from './components/footer'

import Users from './pages/users'
import Projects from './pages/projects'
import User from './pages/user'
import Project from './pages/project'

function App() {
  return (
  <>
        <Header/>

             <BrowserRouter>
              <Routes>
                <Route path='users/' element={<Users />} />
                <Route path='projects/' element={<Projects />} />
                <Route path="/projects/:id" element={<Project />} />
                <Route path="/users/:id" element={<User />} />
              </Routes>
             </BrowserRouter>

        <Footer/>
  </>
  );
}

export default App;

urls.py

from django.urls import path
from .views import getRoutes, UserListView, ProjectListView, projectview

urlpatterns = [
    path('', getRoutes, name='routes'),
    path('users/', UserListView.as_view(), name='routes'),
    path('projects/', ProjectListView.as_view(), name='routes'),
    path('projects/<slug:slug>/', projectview, name='routes'),

view.py

from django.shortcuts import render
from django.http import JsonResponse
from .models import Profile, Project
from django.views.generic.list import ListView
from rest_framework import generics
from rest_framework.response import Response
from rest_framework.decorators import api_view
from .serializers import UserSerializer, ProjectSerializer

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

    routes = [
        '/api/projects/',
        '/api/users/',
        '/api/projects/<str:name>',
        '/api/users/<id>',
    ]
    return Response(routes)
    
        
class UserListView(generics.ListAPIView):
   serializer_class = UserSerializer
   
   def get_queryset(self):
       queryset = Profile.objects.all()
       return queryset.all()

    
class ProjectListView(generics.ListAPIView):
    model = Project
    serializer_class = ProjectSerializer

    def get_queryset(self):
        queryset = self.model.objects.all()
        return queryset

    
@api_view(['GET'])    
def projectview(request, **kwargs):
    
    project = Project.objects.get(slug=kwargs.get('slug'))
    serializer = ProjectSerializer(project)    

    return Response(serializer.data)

祝大家今天愉快！