How do I solve this error"Uncaught Error: [News] is not a <Route> component. All component children of <Routes> must be a <Route>or <React.Fragment>"?

Question

我正在尝试制作一个新闻应用程序，但 react-router-dom 的第 6 版无法正常工作。谁能告诉我如何解决它？

import "./App.css";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import React, { Component } from "react";
import NavBar from "./components/NavBar";
import News from "./components/News";
export default class App extends Component {
  render() {
    return (
      <div>
        <Router>
          <NavBar />
          <Routes>
          <Route exact path="/"><News key="general" pageSize={this.pageSize} country="in" category="general"/></Route> 
          <Route exact path="/business"><News key="business" pageSize={this.pageSize} country="in" category="business"/></Route> 
          <Route exact path="/entertainment"><News key="entertainment" pageSize={this.pageSize} country="in" category="entertainment"/></Route> 
          <Route exact path="/general"><News key="general" pageSize={this.pageSize} country="in" category="general"/></Route> 
          <Route exact path="/health"><News key="health" pageSize={this.pageSize} country="in" category="health"/></Route> 
          <Route exact path="/science"><News key="science" pageSize={this.pageSize} country="in" category="science"/></Route> 
          <Route exact path="/sports"><News key="sports" pageSize={this.pageSize} country="in" category="sports"/></Route> 
          <Route exact path="/technology"><News key="technology" pageSize={this.pageSize} country="in" category="technology"/></Route> 
          </Routes>
        </Router>
      </div>
    );
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

在 React-router-dom v.6 中你应该使用 element 属性：

<Route path="/" element={<News />} />

而不是像

这样的包装组件

<Route path="/" element={<News />} > <News /> </Route>

和版本 5 一样

查看文档：https://reactrouter.com/docs/en/v6/upgrading/v5#relative-routes-and-links

How do I solve this error"Uncaught Error: [News] is not a <Route> component. All component children of <Routes> must be a <Route>or <React.Fragment>"?

How do I solve this error"Uncaught Error: [News] is not a <Route> component. All component children of <Routes> must be a <Route>or <React.Fragment>"?

javascript

reactjs

wildwebdeveloper