React-router-dom v6 не показывает страницу при попытке маршрутизации

Привет ребята, я пытаюсь изучить react-router-dom новой версии, которая является версией 6. Я пытался создать базовую маршрутизацию в моем приложении react-django, но она не работает, если я создаю много маршрутов, например, когда я меняю маршрут на 8000/product, он показывает, что страница не найдена. Может ли кто-нибудь помочь мне с этим?

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

Включили ли вы пути в urlpatterns вашего бэкенда? Это выглядит примерно так:

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')),
]

Также помните, что для того, чтобы это работало, вы должны установить TEMPLATE и STATICFILES_DIRS arrys для указания на каталог /build и /build/statics вашего приложения react соответственно.

Вернуться на верх