I am currently building a React with a Django REST backend. I have come into this one little problem I can't get past that has to do with Routing.

Here is my urls.py file.

urlpatterns = [
    url(r'^api/', include(router.urls)),
    url(r'^admin/', admin.site.urls),
    url(r'^djangojs/', include('djangojs.urls')),
    url(r'^api-auth/', include('rest_framework.urls', namespace='rest_framework')),
    url(r'^$', TemplateView.as_view(template_name='exampleapp/itworks.html')),
    url(r'^(?:.*)/?$', TemplateView.as_view(template_name='exampleapp/itworks.html')),
]

Using this, it lets the react router do it's thing on the front end. For example, if I wanted to go to 127.0.0.1:8000/mentors then it will take me to the page I have set for React Router.

However, doing API calls in the frontend also returns the react page rather than the API endpoint because of this. So whenever I remove the last line in the code above: url(r'^(?:.*)/?$', TemplateView.as_view(template_name='exampleapp/itworks.html')),, then it gets the API returned in JSON format successfully. Problem is now when I try to go to the links it will return the Django 404 page rather than the React page I set in the React Router.

Is there anyway I can get the best of both worlds?