我使用了最新的 React-dom 版本。每次我在終端上運行此代碼時，頁面都會變為空白。這可能有什么問題。沒有控制臺錯誤沒有編譯錯誤。只是空白 `import React from "react"; import { BrowserRouter as Router, Route, Redirect, Switch, } from "react-router-dom";
import About from "./Pages/About/About";
import Contact from "./Pages/Contact/Contact";
import Home from "./Pages/Home/Home";
import Services from "./Pages/Home/Home";
import Testimonial from "./Pages/Testimonial/Testimonial";
import Navbar from "./Components/Navbar/Navbar";
const App = () => {
return (
<Router>
<Navbar />
<main>
<Switch>
<Route path="/" exact>
<Home />
</Route>
<Route path="/about" exact>
<About />
</Route>
<Route path="/services" exact>
<Services />
</Route>
<Route path="/testimonial" exact>
<Testimonial />
</Route>
<Route path="/contact" exact>
<Contact />
</Route>
<Redirect to="/" />
</Switch>
</main>
</Router>
);
};
export default App;
`
uj5u.com熱心網友回復：
react-router-dom 現在使用版本 6。他們已將<Switch />組件重命名為<Routes />. Google檔案的反應路由器-V6-DOC
這是一個如何使用 React Router v6 的簡單示例
import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router, Routes, Route} from 'react-router-dom'
import Home from './Home'
import About from './About'
ReactDOM.render(
<Router>
<Routes>
<Route exact path="/" element={<Home />} />
<Route exact path="/about" element={<About />} />
</Routes>
</Router>,
document.getElementById('root')
)
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/405704.html
標籤：
下一篇：處理npm包依賴項的最佳方法？