React Router v6报错：[News] 不是合法<Route>组件问题求助

React Router v6 对 <Route> 组件的用法做了不兼容旧版的调整：<Routes> 的直接子节点只能是 <Route> 或 <React.Fragment>，同时路由对应的页面组件不能作为 <Route> 的子元素嵌套，必须通过 element 属性传入。你当前的写法还是 v5 及更早版本的写法，因此触发报错。

将所有 <Route> 组件调整为 element 属性传组件的形式即可，修正后的核心 <Routes> 部分代码如下：

<Routes>
  <Route 
    path="/" 
    element={<News
      setProgress={this.setProgress}
      apikey={this.apikey}
      key="general"
      country="in"
      category="general"
    />} 
  />
  <Route 
    path="/ADP-Special" 
    element={<News
      setProgress={this.setProgress}
      apikey={this.apikey}
      key="general"
      country="in"
      category="general"
    />} 
  />
  <Route 
    path="/Science" 
    element={<News
      setProgress={this.setProgress}
      apikey={this.apikey}
      key="science"
      country="in"
      category="science"
    />} 
  />
  {/* 剩余其他路由全部按上述格式修改即可 */}
</Routes>

补充说明：React Router v6 默认开启路由精确匹配，因此不需要再加 exact 属性，保留也不会影响运行。

内容的提问来源于stack exchange，提问作者Arindam Panda