javascript - react 路由器 : Component not getting displayed

Question

我刚开始使用 React，无法让路由器正常工作。下面是路由器的代码。如果我在没有路由器的情况下使用各个组件，它们会显示在屏幕上。但是对于路由器，我不会在任何路径的屏幕上看到任何文本。

如果我遗漏了什么，请告诉我。下面是代码:

import { Route } from 'react-router-dom';

import AllMeetupsPage from './pages/AllMeetups';

import NewMeetupPage from './pages/NewMeetup';

function App() {
  return (
  <div> 
    <Route path='/' exact>
      <AllMeetupsPage />
    </Route>
    
    <Route path='/new-meetup'>
      <NewMeetupPage />
    </Route>

  </div>);
}

export default App;

Answer 1

路由需要是路由器组件的后代。我不确定你使用的是哪个版本的 react-router，但这将是 react-router v6 和 v4/v5 的 BrowserRouter 和 Routes 组件将是一个 BrowserRouter

这里有一些例子:

v6:

import {
  BrowserRouter,
  Routes,
  Route
} from "react-router-dom";

import AllMeetupsPage from './pages/AllMeetups';

import NewMeetupPage from './pages/NewMeetup';

function App() {
  return (
  <div>
    <BrowserRouter>
      <Routes>
        <Route path="/" exact element={<AllMeetupsPage />}/>
        <Route path="/new-meetup" element={<NewMeetupPage />}/>
      </Routes>
    </BrowserRouter>
  </div>);
}

export default App;