React Router：组件未显示

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 的BrowserRouter和Routes组件，在 v4/v5 上它将是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>
          <AllMeetupsPage />
        </Route>

        <Route path='/new-meetup'>
          <NewMeetupPage />
        </Route>
      </Routes>
    </BrowserRouter>
  </div>);
}

export default App;

或 v4/v5

import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

import AllMeetupsPage from './pages/AllMeetups';

import NewMeetupPage from './pages/NewMeetup';

function App() {
  return (
  <div>
    <Router>
      <Route path='/' exact>
        <AllMeetupsPage />
      </Route>

      <Route path='/new-meetup'>
        <NewMeetupPage />
      </Route>
    </Router>
  </div>);
}

export default App;

Answer 2

你错过了使用 Switch 组件

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

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

  </div>);
}

export default App;