javascript - 未定义“路由”react/jsx-no-undef

Question

所以我正在 YouTube 上学习 Academind 的 React 速成类(class)。我一直在跟踪一切，一切都很好，直到我来到路由部分。我遵循了每一步，一切都很完美(对于路由部分)，但是刷新页面后出现以下错误:

A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>.

Aa我做到了，我将我的路线包裹在 route :

    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>
      <Routes>
        <Route path='/'>
          <AllMeetupsPage />
        </Route>

        <Route path='/new-meets'>
          <NewMeetupsPage />
        </Route>

        <Route path='/favs'>
          <FavoritesPage />
        </Route>
      </Routes>
    </div>
  );
}

export default App;

然后我得到这个:

'Routes' is not defined react/jsx-no-undef

然后我:

尝试从react-router-dom导入路由 - 没有成功；

尝试从react-router导入路由 - 没有成功；

尝试在不同的组件中导入路由 - 没有成功；

相信我，我尝试了路线的每种不同场景，但无法实现任何不同的效果。我

谷歌搜索，研究，找不到这个问题的解决方案。现在我绝望了卡在这里，如果不解决这个问题，我就无法继续我的 React 学习之旅...

Answer 1

事实是，我正在遵循旧版 React-router-dom 的指南；

为了解决这个问题，我刚刚阅读了react-router-dom@6的新文档；

没有<Switch>现在，您可以像这样包装您的应用程序:

ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.getElementById("root")
); 

然后在应用程序组件中，将内容包装在 <Routes> 中对于我们使用的每条不同路径 <Route> </Route>或者只是 <Route /> ，取决于您的元素。

这是我的例子，只是为了更清楚:

function App() {
  return (
    <div>
    <MainNavigation/>
      <Routes>
        <Route path="/" element={<AllMeetups />}></Route>
        <Route path="/new-meetups" element={<NewMeetups />}></Route>
        <Route path="/favorites" element={<Favorites />}></Route>
      </Routes>
    </div>
  );
}