React Error: No routes matched location "/" after I've tried solutions in other simil-CodePudding

I've tried solutions mentioned in other similar questions/posts but still can't seem to find fix. Blank page. Console warning mentions the line corresponding to ReactDOM.render. I've tried one of the paths as "/" and index which did not work.

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

Here is a second version for path "/" but with a different console error:

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.

CodePudding user response：

There must be a route for the home page of the app or a default route for all the unmentioned routes like "*".

Something like

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