Hi guys so I'm trying to learn about react-router-dom newest version which is version 6. I tried to create a basic routing in my react-django app, but it didn't work if I create many Routes, for example when i change my route into 8000/product it will show page not found. Can anyone help me with it ?
App.js:
import React from "react";
import HomePage from "./components/HomePage";
import Product from "./components/Product";
import ProductDetail from "./components/ProductDetail"
import {
BrowserRouter as Router,
Routes,
Route,
Outlet,
} from "react-router-dom";
const App = () => {
return (
<>
<Router>
<Routes>
<Route path="/" element={<HomePage/>}/>
<Route path="/product" element={<Product/>}/>
<Route path="/productdetail" element={<ProductDetail/>}/>
</Routes>
</Router>
<Outlet/>
</>
)
}
export default App
Have you included the paths in your backend urlpatterns? It goes something like this:
urlpatterns = [
path ('', TemplateView.as_view(template_name = 'index. html' )),
path ('productdetail/', TemplateView.as_view(template_name = 'index.html')),
path ('products/', TemplateView.as_view(template_name = 'index.html')),
]
Also rember for this to work you must have set the TEMPLATE and STATICFILES_DIRS arrys to point to your react application /build and /build/statics directory respectively.