React-router-dom v6 在尝试路由时没有显示页面
React-router-dom v6 didn't show page when try to route
大家好,我正在尝试了解 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 分别指向您的 React 应用程序 /build 和 /build/statics 目录。
大家好,我正在尝试了解 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 分别指向您的 React 应用程序 /build 和 /build/statics 目录。