Clash Royale CLAN TAG#URR8PPP

Django / React Router DOM - Landing on a url not specified in django

I'm building an app with django as the backend api and react as the frontend framework. When landing on an empty pathname url such as www.fakeapp.com/ django shows a frontend app view which renders an index page built with react.

www.fakeapp.com/

Inside the react SPA I have <Link>s which update the <BrowserRouter>s <Route>s and might send you to the path /user/register (which is working fine). However, if I refresh the page with the new pathname www.fakeapp.com/user/register django doesn't recognize the url and throws an error.

<Link>

<BrowserRouter>

<Route>

/user/register

www.fakeapp.com/user/register

I'm not sure the best path to take here since this is my first django project and my first time using react-router-dom. Should I specify more/different urlpatterns in the urls.py file for my frontend app, redirect back to the index, or something else?

react-router-dom

urls.py

I can post any code needed.

index.html

2 Answers
2

This happens because Django is handling the initial render. Unfortunately you can't do both. Either go all the way React for your routes or all the way Django for the routes with a corresponding React component for each Django route.

Your Django app needs to be able to recognize any URL that your react app needs to render. Usually you can do this with a wildcard in the Django urlconf

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.