Serving react build folder in django, page not found on reload

I'm writing a chat application in Django and using React as the front end, I'm serving the react at root path 'localhost:8000/' and there are some path in the react app too such as 'chat/:user', I can access this as long as I go from the root path, if I enter the path manually or try reloading the page it gives the error 'Page not found'.

This is my urls.py file

from django.contrib import admin
from django.urls import path, include
from django.views.generic import TemplateView

urlpatterns = [
    path('admin/', admin.site.urls),
    path('accounts/', include('accounts.urls')),
    path('', TemplateView.as_view(template_name='index.html'), name='chat'),
    path('api-auth/', include('rest_framework.urls'), name='api-auth'),
    path('api/', include('api.urls')),
]

and this is my App.js

function App(props) {
    const [user, setUser] = useState('none');
    useEffect(() => {
        fetch('http://localhost:8000/api/user-data')
            .then((response) => response.json())
            .then((data) => {
                setUser(data.username);
        });
    }, [])
    //console.log(window.location.href);
    return (

        <BrowserRouter>
        <Routes>
            <Route path='/' element={<Layout user={user} socket={props.socket} />}>
                <Route index element={<Home user={user} socket={props.socket} />} />
                <Route path='chat/:chattingUser' element={<ChatPage user={user} socket={props.socket} />} />
                <Route path='search/:queryText' element={<SearchPage user={user} socket={props.socket} />} />
           </Route>  
       </Routes> 
       </BrowserRouter>
   );
}

I was at the route /chat/ and I changed some things in the code so had to reload the page, then this error came, why is it looking at django urls when i reload and how do I make it look at react when reloading or entering urls manually.

I haven't implemented it yet but I want my app to stay on the react side once the user is authenticated and only come to the django pages only when it logs out.

Back to Top