我在 react Error: [News] is not a <Route> 组件中收到此错误。 <Routes> 的所有子组件必须是 <Route> 或 <React.Fragment>答案

【问题标题】：I am getting this error in react Error: [News] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>我在 react Error: [News] is not a <Route> 组件中收到此错误。 <Routes> 的所有子组件必须是 <Route> 或 <React.Fragment>
【发布时间】：2022-01-06 05:15:05
【问题描述】：

这是我的 app.js 代码我已经安装了 react-router dom 版本 6 并使用了路由而不是 swicthes 我仍然收到此错误。我还尝试将 react.fragment 放在路由下，但错误仍然没有消失。请帮忙，因为我是新来的反应

import './App.css';
import React, { Component,} from 'react'
import Navbar from './Components/Navbar';
import News from './Components/News';
import {
  BrowserRouter as Router,
  Routes,
  Route
} from "react-router-dom";


export default class App extends Component {
  render() {
    return (
      <div>
        <Router>
          <Navbar />

          <Routes>
            <Route exact path="/business"> <News key="business"  country="in" category="business" /></Route>
            <Route exact path="/entertainment"><News key="entertainment" country="in" category="entertainment" /></Route>
            <Route exact path="/general"><News key="general" country="in" category="general" /></Route>
            <Route exact path="/health"><News key="health"  country="in" category="health" /></Route>
            <Route exact path="/science"><News key="science" country="in" category="science" /></Route>
            <Route exact path="/sports"> <News key="sports" country="in" category="sports" /></Route>
            <Route exact path="/technology"><News key="technology" country="in" category="technology" /></Route>
          </Routes>
        </Router>
      </div>
    )
  }
}

【问题讨论】：

stackoverflow.com/a/70108430/269694 这似乎是您问题的解决方案。这里也是他们的入门教程的链接：github.com/remix-run/react-router/blob/main/docs/…

标签： reactjs react-router

【解决方案1】：

我找到了答案，这里是代码，我在路由中添加了元素属性。

import './App.css';
import React, { Component, Fragment, } from 'react'
import Navbar from './Components/Navbar';
import News from './Components/News';
import {
  BrowserRouter as Router,
  Routes,
  Route
} from "react-router-dom";


export default class App extends Component {
  render() {
    return (
      <div>
        <Router>
          <Fragment>
            <Navbar />
            <Routes>
              <Route exact path="/entertainment" element={<News key="entertainment" country="in" category="entertainment" />} />
              <Route exact path="/business" element={<News key="business" country="in" category="business" />} />
              <Route exact path="/general" element={<News key="general" country="in" category="general" />} />
              <Route exact path="/health" element={<News key="health" country="in" category="health" />} />
              <Route exact path="/science" element={<News key="science" country="in" category="science" />} />
              <Route exact path="/sports" element={<News key="sports" country="in" category="sports" />} />
              <Route exact path="/technology" element={<News key="technology" country="in" category="technology" />} />
            </Routes>
          </Fragment>
        </Router>
      </div>
    )
  }
}

【讨论】：