App.js 代碼-
import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import { Container } from "react-bootstrap";
import Header from "./components/Header";
import Footer from "./components/Footer";
import HomeScreen from "./screens/HomeScreen";
const App = () => {
return (
<Router>
<Header />
<main className='py-3'>
<Container>
<HomeScreen />
</Container>
</main>
<Footer />
</Router>
);
};
export default App;
我的 app.js 就是這樣，一切正常。但是之后我添加了Route標簽，代碼變成了這樣
import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import { Container } from "react-bootstrap";
import Header from "./components/Header";
import Footer from "./components/Footer";
import HomeScreen from "./screens/HomeScreen";
const App = () => {
return (
<Router>
<Header />
<main className='py-3'>
<Container>
<Route exact path='/' component={HomeScreen} />
</Container>
</main>
<Footer />
</Router>
);
};
export default App;
但是加了Route之后，HomeScreen不渲染了？誰能告訴我為什么會這樣？
uj5u.com熱心網友回復：
在react-router-domv6 中，Route組件必須呈現為Routes組件，并且路由組件在elementprop 上呈現為ReactElement（也稱為 JSX），因為component, 和render和children函式 props 不再存在。
import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import { Container } from "react-bootstrap";
import Header from "./components/Header";
import Footer from "./components/Footer";
import HomeScreen from "./screens/HomeScreen";
const App = () => {
return (
<Router>
<Header />
<main className='py-3'>
<Container>
<Routes>
<Route path='/' element={<HomeScreen />} />
</Routes>
</Container>
</main>
<Footer />
</Router>
);
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/418444.html
標籤：
上一篇：如何在ReactuseStateInitialState中傳遞物件的副本
下一篇：我如何獲得Todo的ID