ReactJS 路线 function 不适合我

Question

我昨天开始使用 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;

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 我得到了这个结果。

如果我只使用<AllMeetupsPage />那么它可以工作。 如果我把它放在路线 function 那么它不会。 我怎样才能解决这个问题？

Answer 1

提这个

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

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

Answer 2

当您只使用<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>