React Router路由配置问题求助：页面空白及版本兼容报错

我正在参加Web开发训练营，开发一款支持电影浏览、影片收藏、个人资料创建的应用。当前任务是配置React Router路由，但遇到以下问题：

第一阶段问题 #

按教程编写代码后，页面仅显示导航栏和背景色，开发者工具报错：

utils.ts:767 Matched leaf route at location "/register" does not have an element. This means it will render an

return (<Outlet />)

with a null value by default resulting in an "empty" page.
OR
Matched leaf route at location "/" does not have an element. This means it will render an

return (<Outlet />)

with a null value by default resulting in an "empty" page.

网上解决方案均提及将component改为element，但我使用的是render属性，该方案不适用。

第二阶段问题 #

参考同学建议安装旧版本react-router-dom@5.3.0后，导航栏消失，出现新报错：

react-dom.development.js:86 Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17.
main-view.jsx:125 Array(0)
react-jsx-runtime.development.js:87 Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of MainView.
at MainView (http://localhost:1234/index.6701a6e1.js:25282:9)
at MyFlixApplication (http://localhost:1234/index.6701a6e1.js:955:1)
printWarning @ react-jsx-runtime.development.js:87
react-dom.development.js:28439 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of MainView.
at createFiberFromTypeAndProps (react-dom.development.js:28439:17)
at createFiberFromElement (react-dom.development.js:28465:15)
at reconcileSingleElement (react-dom.development.js:15750:23)
at reconcileChildFibers (react-dom.development.js:15808:35)
at reconcileChildren (react-dom.development.js:19167:28)
at updateHostComponent (react-dom.development.js:19924:3)
at beginWork (react-dom.development.js:21618:14)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:14)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)
at invokeGuardedCallback (react-dom.development.js:4277:31)
react-dom.development.js:18687 The above error occurred in the

component:

at div
at http://localhost:1234/index.6701a6e1.js:43098:48
at Router2 (http://localhost:1234/index.6701a6e1.js:29157:34)
at BrowserRouter2 (http://localhost:1234/index.6701a6e1.js:28837:39)
at MainView (http://localhost:1234/index.6701a6e1.js:25282:9)
at MyFlixApplication (http://localhost:1234/index.6701a6e1.js:955:1)

Consider adding an error boundary to your tree to customize error handling behavior.

导师未能定位问题，附上仓库分支链接寻求帮助：myFlix-client Router分支

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