ReactJS Route 功能对我不起作用

Question

我昨天开始使用 Academind 的初学者速成课程学习 ReactJS。有一部分是他教的react-router-dom。我尝试在App.js 和index.js 上使用它：

App.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;

index.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 我得到this 作为结果。

如果我只使用<AllMeetupsPage />，那么它可以工作。如果我把它放在路由函数中，那么它不会。我该如何解决这个问题？

Answer 1

当您只使用<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] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

Answer 2

这个

import {Routes} from "react-router-dom"

       <Routes>
          <Route path='/'>
            <AllMeetupsPage />
          </Route>
          <Route path='/favourites'>
            <FavouritesPage />
          </Route>
          <Route path='/new-meetups'>
            <NewMeetupsPage />
          </Route>
        </Routes>