[React]Route路由踩坑记录及解决方法

作为一个React初学者，在基础学习的时候所有的代码以及语法都应该是跟着课程来写的，但是，实际环境中总会有各种因素影响，如库的版本不一致导致语法变更等...你就会遇到诸如以下这种错误：

学到React的路由这一部分的时候，课程里面用的语法是这样的(课程基于React17，我自己用的版本是18,由于react-route-dom版本的问题，v6「Routes」与v5「Switch」语法不一致)：

function App() {
  return (
    <div>
      <Route path='/'>
        <AllMeetupPage />
      </Route>
      <Route path='/favorites'>
        <FavoritesPage />
      </Route>
      <Route path='/new-meetup'>
        <NewMeetupPage />
      </Route>
    </div>
  );
}

npm start刚开始没有报错，但是实际上页面并没有渲染成功，页面没有显示任何内容。通过修改代码排查，最后将问题定位在React的路由上，经过多次尝试，浏览器终于给我显示了错误信息：

Uncaught runtime errors:
ERROR
A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>.
    at invariant (http://localhost:3000/static/js/bundle.js:921:11)
    at Route (http://localhost:3000/static/js/bundle.js:40145:78)
    at renderWithHooks (http://localhost:3000/static/js/bundle.js:25573:22)
    at mountIndeterminateComponent (http://localhost:3000/static/js/bundle.js:28859:17)
    at beginWork (http://localhost:3000/static/js/bundle.js:30155:20)
    at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:15165:18)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:15209:20)
    at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:15266:35)
    at beginWork$1 (http://localhost:3000/static/js/bundle.js:35140:11)
    at performUnitOfWork (http://localhost:3000/static/js/bundle.js:34387:16)

根据错误提示说要把Route放在在Routes里面使用，所以修改代码在Route外面套了一层Routes。

function App() {
  return (
    <div> 
      <Routes>
      <Route path='/'>
        <AllMeetupPage />
      </Route>
      <Route path='/favorites'>
        <FavoritesPage />
      </Route>
      <Route path='/new-meetup'>
        <NewMeetupPage />
      </Route>
      </Routes>
    </div>
  );
}

结果遇到了新的错误：

Uncaught runtime errors:
ERROR
[AllMeetupPage] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>
    at invariant (http://localhost:3000/static/js/bundle.js:921:11)
    at http://localhost:3000/static/js/bundle.js:40376:108
    at http://localhost:3000/static/js/bundle.js:42637:21
    at http://localhost:3000/static/js/bundle.js:42600:21
    at mapIntoArray (http://localhost:3000/static/js/bundle.js:42503:27)
    at mapChildren (http://localhost:3000/static/js/bundle.js:42599:7)
    at Object.forEachChildren [as forEach] (http://localhost:3000/static/js/bundle.js:42636:7)
    at createRoutesFromChildren (http://localhost:3000/static/js/bundle.js:40364:47)
    at http://localhost:3000/static/js/bundle.js:40395:24
    at http://localhost:3000/static/js/bundle.js:42637:21

经过上网结合关键词搜索，在一篇国外的博客上找到了解决方法：传送门

是因为语法格式的问题，不应该直接在Route里面传递自己编写的component，而应该用element，写在表达式{}里面。

错误写法：

<Routes>
  <Route path="/">
    <AllMeetupPage />
  </Route>
</Routes>

正确的写法应为：

<Routes>
  <Route path="/" element={<AllMeetupPage />}></Route>
</Routes>

保存修改后的代码文件，在浏览器已经能看到成功渲染之后的page，且可进行页面路由。