React-router-dom v6 在嘗試路由時沒有顯示頁面

Question

大家好，我正在嘗試了解 react-router-dom 最新版本，即第 6 版。我嘗試在我的 react-django 應用程序中創建一個基本路由，但是如果我創建許多路由，它就不起作用，例如當我將路線更改為 8000/product 時，它會顯示未找到頁面。 任何人都可以幫我嗎？

應用程序.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

Answer 1

您是否在后端 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數組分別設置為指向您的 React 應用程序 /build 和 /build/statics 目錄。