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

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

这是路径“/”的第二个版本，但有不同的控制台错误：

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>