Question 383752 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Connecting Django Rest and React

I have a query regarding the integration of Django Rest Framework with React. I’ve meticulously followed all the setup steps, and upon running the server, my site, including the blog details, is rendered flawlessly in the browser.

However, I’ve encountered an issue: when I refresh the internal pages (the homepage refreshes without any problems), I’m presented with JSON data on those pages instead of the expected content. Could you possibly provide some guidance on this matter?

Thank you.

I put the following code in Django’s settings file:

from pathlib import Path

# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent
REAL_BASE_DIR = Path(__file__).resolve().parent.parent.parent



# Other codes



ROOT_URLCONF = 'backend.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        
        'DIRS': [os.path.join(REAL_BASE_DIR, 'frontend', 'build')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

STATIC_URL = 'static/'
STATICFILES_DIRS = [os.path.join(REAL_BASE_DIR, 'frontend', 'build', 'static')]


CKEDITOR_UPLOAD_PATH = 'uploads/'  # Adjust the path as needed

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'



REST_FRAMEWORK = {
     'DEFAULT_RENDERER_CLASSES': (
         'rest_framework.renderers.JSONRenderer',
     )
 }

All the endpoints work fine in React and there are no problems as long as I navigate the site. But when I reload the internal pages, JSON data is displayed.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I initially updated the URL configurations by adding the following code to serve the React application’s index.html for any unmatched URL patterns:

    # Define a catch-all route to serve the React application's index.html
re_path(r'^.*', TemplateView.as_view(template_name='index.html')),

    However, this resulted in the internal pages reloading with JSON data instead of the expected content. To address this, I modified the code as follows, which successfully linked some internal pages, such as the list of posts and the details of each post, to their respective endpoints upon reload:

    # Serve React's index.html for all unmatched URLs
re_path(r'^.*$', TemplateView.as_view(template_name='index.html')),

  2. 0

    It seems like you’ve configured Django to use the JSONRenderer class by default for rendering responses in the REST Framework. This is why you’re seeing JSON data instead of the expected HTML content when refreshing internal pages of your React application.

    To resolve this issue, you should remove the JSONRenderer from the DEFAULT_RENDERER_CLASSES in your Django settings. This will allow Django to render HTML content instead of JSON for non-API requests.

    Here’s the modified configuration:

    REST_FRAMEWORK = {
    'DEFAULT_RENDERER_CLASSES': (
        'rest_framework.renderers.JSONRenderer',
        # Add any other renderer classes you need here
    )
}

    Make sure to remove or comment out the JSONRenderer class from the DEFAULT_RENDERER_CLASSES.

    Once you’ve made this change and restarted your Django server, refreshing internal pages of your React application should render the expected HTML content instead of JSON data.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search