reactjs React错误:在我尝试过其他类似问题/帖子中的解决方案后,没有与位置“/”匹配的路线

bzzcjhmw  于 2022-11-29  发布在  React
关注(0)|答案(1)|浏览(163)

我已经尝试了其他类似问题/帖子中提到的解决方案,但似乎仍然无法找到修复。空白页面。控制台警告提到了对应于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.
z4bn682m

z4bn682m1#

必须有一个路线为应用程序的主页或默认路线为所有未提及的路线像“*"。
比如

<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>

相关问题