我昨天開始使用 Academind 的初學者速成課程學習 ReactJS。有一部分是他教的react-router-dom。我嘗試使用它App.js，并index.js為這樣的：
應用程式.js：
import { Route } from "react-router-dom";
import AllMeetupsPage from "./pages/AllMeetups";
import FavouritesPage from "./pages/Favourites";
import NewMeetupsPage from "./pages/NewMeetups";
function App() {
return (
<div>
<Route path='/'>
<AllMeetupsPage />
</Route>
<Route path='/favourites'>
<FavouritesPage />
</Route>
<Route path='/new-meetups'>
<NewMeetupsPage />
</Route>
</div>
);
}
export default App;
索引.js：
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom'
import './index.css';
import App from './App';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);
應該不會有任何錯誤，因為我已經修復了語法并匯入了視頻中給出的正確檔案。然而，在 localhost:3000 中，我得到了這個結果。
如果我只是使用<AllMeetupsPage />那么它的作業原理。如果我把它放在路由功能中，那么它不會。我怎樣才能解決這個問題？
uj5u.com熱心網友回復：
當您剛剛使用時，<AllMeetupsPage/>它會直接在 App.js 中呈現該頁面組件。
它實際上沒有做任何路由。要使用多個，您還需要將其包裝在 .
<div>
<Routes>
<Route path="/" element={<AllMeetupsPage />} />
<Route path="/favourites" element={<FavouritesPage />} />
<Route path="/new-meetups" element={<NewMeetupsPage />} />
</Routes>
</div>
您可以參考以下鏈接以獲取問題的更多背景關系：[1]：ReactJS：[Home] 不是 <Route> 組件。<Routes> 的所有子組件必須是 <Route> 或 <React.Fragment>
uj5u.com熱心網友回復：
提這個
import {Routes} from "react-router-dom"
<Routes>
<Route path='/'>
<AllMeetupsPage />
</Route>
<Route path='/favourites'>
<FavouritesPage />
</Route>
<Route path='/new-meetups'>
<NewMeetupsPage />
</Route>
</Routes>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/393480.html
標籤：javascript 反应
上一篇：按下鍵盤時自動編號