'Routes' 未定义 react/jsx-no-undef答案

【问题标题】：'Routes' is not defined react/jsx-no-undef'Routes' 未定义 react/jsx-no-undef
【发布时间】：2022-01-08 00:15:51
【问题描述】：

所以我在 YouTube 上为 Academind 的初学者学习 React Crash Course。我一直在跟踪一切，一切都很好，直到我来到路由部分。我遵循了每一步，一切都完美无缺（对于路由部分），但刷新页面后出现以下错误：

<Route> 只能用作<Routes> 元素的子元素，从不直接渲染。请将您的 <Route> 包裹在 <Routes> 中。

我做到了，我将我的路线包裹在路线中：

    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' 没有定义 react/jsx-no-undef

然后我：

尝试从 react-router-dom 导入 Routes - 不成功；

尝试从 react-router 导入 Routes - 不成功；

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

相信我，我为 Routes 尝试了所有不同的场景，但无法实现任何不同。我

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

【问题讨论】：

标签： javascript html css reactjs

【解决方案1】：

试试import { BrowserRouter as Routes, Route } from react-router-dom

文档：https://v5.reactrouter.com/web/guides/quick-start

【讨论】：

感谢您的快速响应，我试过了，现在我明白了 > 您不能在另一个 <Router> 中渲染 <Router>。您的应用中不应包含多个。
您是否更改了代码中的其他内容？

【解决方案2】：

你应该使用Switch代替Routes nested routes

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

    function App() {
      return (
        <div>
<Router>
          <Switch>
            <Route path='/'>
              <AllMeetupsPage />
            </Route>
    
            <Route path='/new-meets'>
              <NewMeetupsPage />
            </Route>
    
            <Route path='/favs'>
              <FavoritesPage />
            </Route>
          </Switch>
</Router>
        </div>
      );
    }

【讨论】：

你好，看起来不错，但我得到了*Attempted import error: 'Switch' is not exported from 'react-router-dom'.*，只尝试了'react-router'，结果相同。
你使用的 react-router-dom 是什么版本？
"react-router-dom": "^6.0.2",
你能不能试着用路由器把 Switch 包起来，我已经更新了答案

【解决方案3】：

问题是，我正在遵循旧版 react-router-dom 的指南；

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

现在没有<Switch>，而是像这样包装你的APP：

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

然后在 App 组件中，您将内容包装在 <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>
  );
}

【讨论】：

【解决方案4】：

尝试运行yarn add react-router，然后运行import {Routes,Route} from 'react-router'

【讨论】：