javascript - react 路由不加载页面

Question

我正在学习 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

Answer 1

您可以像这样在 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")
);