我正在学习 React,但遇到了一个问题。我已经开始处理路由,但它根本不起作用。
代码:
import {Route} from 'react-router-dom'
import AllMeetupsPage from './pages/AllMeetups';
import NewMeetupsPage from './pages/NewMeetups';
import FavoritesPage from './pages/Favorites';
function App() {
return (
<div>
<Route path = '/'>
<AllMeetupsPage />
</Route>
<Route path = '/new-meetup'>
<NewMeetupsPage />
</Route>
<Route path = '/favorites'>
<FavoritesPage />
</Route>
</div>
);
}
export default App;
即使页面应该加载,我仍然有一个空白屏幕。打开时的每一页应该只打印一行只是为了看到我可以看到路由工作但是我看到的只是一个空白意味着它不能正常工作。
您可以在此处查看完整代码:https://github.com/Kroplewski-M/Routing
最佳答案
您可以像这样在 index.js 中简单地处理路由:
import { BrowserRouter, Route, Routes } from "react-router-dom";
ReactDOM.render(
<div>
<BrowserRouter>
<Routes>
<Route path="/" element={<AllMeetupsPage />} />
<Route path="/new-meetup" element={<NewMeetupsPage />} />
<Route path="/favorites" element={<FavoritesPage />} />
</Routes>
</BrowserRouter>
</div>,
document.getElementById("root")
);
关于javascript - react 路由不加载页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70737452/