[英]Why my components don't display on my React page?
So I'm learning React and building an app with multiple pages, I made a Routes file which looks like this:所以我正在学习 React 并构建一个包含多个页面的应用程序,我制作了一个如下所示的 Routes 文件:
import 'swiper/swiper.min.css';
import React from "react";
import { Route, Routes } from "react-router-dom";
import Home from "../pages/Home";
import Catalog from "../pages/Catalog";
import Detail from "../pages/Detail";
const Router = () => {
return (
<Routes>
<Route
path='/:category/search/:keyword'
component={Catalog}
/>
<Route
path='/:category/:id'
component={Detail}
/>
<Route
path='/:category'
component={Catalog}
/>
<Route
path='/'
exact
component={Home}
/>
</Routes>
);
}
And App.js looks like this: App.js 看起来像这样:
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Header from './components/header/Header';
import Footer from './components/footer/Footer';
import Router from './config/Router';
function App() {
return (
<BrowserRouter>
<Routes>
<Route render={props =>{
<>
<Header {...props}/>
<Router/>
<Footer/>
</>
}}/>
</Routes>
</BrowserRouter>
);
}
export default App;
As you see, I have a browser router and Route which passes props to a component(as I understood) but for some reason the components don't display on the page(original components just have with their name inside of them, but they don't display in App.js).如您所见,我有一个浏览器路由器和 Route 将 props 传递给组件(据我所知),但由于某种原因,组件不会显示在页面上(原始组件只是在其中包含它们的名称,但它们没有'不在 App.js 中显示)。
And my console also says:我的控制台还说:
No routes matched location "/"
In routes.jsx file.在 routes.jsx 文件中。 I'm guessing it should lead to main page, but for some reason the route doesn't match and components in App.js don't display.
我猜它应该指向主页,但由于某种原因,路由不匹配并且 App.js 中的组件不显示。
In Version 6.0.0 there is not any component
prop in Route
.在6.0.0 版中,
Route
中没有任何component
道具。 It has been changed to element
.它已更改为
element
。 So you need to change your Router
to:因此,您需要将
Router
更改为:
const Router = () => {
return (
<Routes>
<Route
path='/:category/search/:keyword'
element={Catalog}
/>
<Route
path='/:category/:id'
element={Detail}
/>
<Route
path='/:category'
element={Catalog}
/>
<Route
path='/'
exact
element={Home}
/>
</Routes>
);
}
As you've said you're using react-router-dom 6.0.2, and it seems that the tutorial you are following is for the older version (5?).正如您所说,您使用的是react-router-dom 6.0.2,您所遵循的教程似乎适用于旧版本(5?)。 There were some breaking changes in version 6.
版本 6 中有一些重大更改。
You need to change your Router
component to use element
instead of component
:您需要将
Router
组件更改为使用element
而不是component
:
const Router = () => {
return (
<Routes>
<Route path="/:category/search/:keyword" element={<Catalog />} />
<Route path="/:category/:id" element={<Detail />} />
<Route path="/:category" element={<Catalog />} />
<Route path="/" exact element={<Home />} />
</Routes>
);
};
and also your App
component seems to be getting in the way with the nested route.而且您的
App
组件似乎妨碍了嵌套路由。
I think it can be simplified to:我认为可以简化为:
function App() {
return (
<BrowserRouter>
<>
<Header />
<Router />
<Footer />
</>
</BrowserRouter>
);
}
You can see a working demo on stackblitz你可以在 stackblitz 上看到一个工作演示
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.