我正在嘗試使用 react-routing-dom lib 呈現一個超簡單的網頁。這是我的 app.js
import React from 'react';
import Nav from './nav.js';
import Shop from './shop.js';
import About from './about.js';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import './App.css';
function App() {
return (
<>
<Nav />
<Router>
<Route exact path='/' element={<About />} />
<Route exact path='/shop' element={<Shop />} />
</Router>
</>
);
}
export default App;
使用它，我運行npm start并期望<Nav />和<About />組件呈現在http://localhost:3000. 相反，螢屏是完全空白的。沒有警告、錯誤等；這是一個干凈的構建。甚至整個路由器塊之外<Nav />的組件都不會被渲染！
情節變厚了：當我構建并運行以下內容時，所有三個組件都會呈現。
import React from 'react';
import Nav from './nav.js';
import Shop from './shop.js';
import About from './about.js';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import './App.css';
function App() {
return (
<>
<Nav />
<Router>
<About />
<Shop />
</Router>
</>
);
}
export default App;
由此，我認為可以安全地假設這<Route />是問題所在。
react-router-dom 似乎在相對較短的時間內發生了很大的變化，因此有很多過時的資訊。如果有人能指出我正確的方向，我將非常感激。
uj5u.com熱心網友回復：
我唯一看到的就是Routes包裝組件的Route組件。您匯入Routes但似乎沒有使用它。所有Route組件都必須呈現為一個Routes組件（如果嵌套，則為另一個Route）。沒有Routes你應該看到錯誤A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>.
<Router>
<Routes>
<Route exact path="/" element={<About />} />
<Route exact path="/shop" element={<Shop />} />
</Routes>
</Router>
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/410577.html
標籤：
上一篇：如何在物件陣列中獲取陣列的內容