反应错误：在我尝试了其他类似问题/帖子中的解决方案后，没有路线与位置"/"匹配

Question

我已经尝试了其他类似问题/帖子中提到的解决方案，但似乎仍然无法找到解决方案。空白页。控制台警告提到与ReactDOM.render相对应的行。我已经尝试了其中一条路径"/"和不能工作的索引

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import './style.css'
import LandingPage from './views/landing-page'
import Page from './views/page'
const App = () => {
return (
<Router>
<div>
<Routes>
<Route component={LandingPage} exact path="/landing-page"/>
<Route component={Page} exact path="/page" />
</Routes>
</div>
</Router>
)
}
ReactDOM.render(<App />, document.getElementById('app'))

Console error:
utils.ts:791 No routes matched location "/" 
warning @ utils.ts:791
useRoutes @ hooks.tsx:386
Routes @ components.tsx:383
renderWithHooks @ react-dom.development.js:16305
mountIndeterminateComponent @ react-dom.development.js:20074
beginWork @ react-dom.development.js:21587
beginWork$1 @ react-dom.development.js:27426
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
performSyncWorkOnRoot @ react-dom.development.js:26085
flushSyncCallbacks @ react-dom.development.js:12042
flushSync @ react-dom.development.js:26201
legacyCreateRootFromDOMContainer @ react-dom.development.js:29575
legacyRenderSubtreeIntoContainer @ react-dom.development.js:29601
render @ react-dom.development.js:29685
./src/index.js @ index.js:24
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
(anonymous) @ startup:7
(anonymous) @ startup:7

这是第二个版本的path "/"但是有一个不同的控制台错误:

const App = () => {
return (
<Router>

<Routes>

<Route component={LandingPage} exact path="/"/>
<Route component={Page} exact path="/page" />
</Routes>

</Router>
)
}
ReactDOM.render(<App />, document.getElementById('app'))
Console error:
utils.ts:791 Matched leaf route at location "/" does not have an element. This means it will render an <Outlet /> with a null value by default resulting in an "empty" page.

Answer 1

必须有一个应用程序主页的路由，或者为所有未提及的路由(如"*")提供默认路由。

之类的

<Router>
<Routes>
<Route path="/" element={<Home />} />
<Route component={LandingPage} exact path="/landing-page"/>
<Route component={Page} exact path="/page" />
<Route path="*" element={<p>Path not resolved</p>} />
</Routes>
</Router>