提问人：Mat 提问时间：1/17/2022 最后编辑：Jose German Perez SanchezMat 更新时间：1/18/2022 访问量：1608
React 路由不加载页面
React routing not loading pages
问：
我正在学习反应，但我遇到了一个问题。我已经开始研究路由，但它根本不起作用。
法典：
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
答：
2赞
kazmi066
1/17/2022
#1
您必须将已经完成的路由包装在文件中，这很好。接下来，路由必须使用最新版本的组件进行包装<BrowserRouter>index<Routes>'react-router-dom'v6
import { Routes, Route } from "react-router-dom";
function App(){
return (
<div>
<Routes>
<Route path="/" element={<AllMeetupsPage />} />
<Route path="/new-meetup" element={<NewMeetupsPage />} />
</Routes>
</div>
);
}
export default App;
2赞
Berke Kaan Cetinkaya
1/17/2022
#2
简单地说，您可以像这样处理 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")
);
2赞
Arslan Hanif
1/17/2022
#3
您没有将路由包装在路由器下，这就是您的路由不起作用的原因。
这是代码。
import {Router,Route} from 'react-router-dom'
import AllMeetupsPage from './pages/AllMeetups';
import NewMeetupsPage from './pages/NewMeetups';
import FavoritesPage from './pages/Favorites';
function App() {
return (
<div>
<Router>
<Route path = '/'>
<AllMeetupsPage />
</Route>
<Route path = '/new-meetup'>
<NewMeetupsPage />
</Route>
<Route path = '/favorites'>
<FavoritesPage />
</Route>
</Router>
</div>
);
}
export default App;
我希望它能起作用。
评论