위치 "/"의 일치하는 리프 경로에 요소가 없습니다.

위치 "/"의 일치하는 리프 경로에 요소가 없습니다.

위치 "/"에서 일치하는 리프 경로에 요소가 없습니다.즉, 디폴트값이 null인 를 렌더링하여 "빈" 페이지가 생성됩니다.

//App.js File

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
// import ReactDOM from "react-dom";


const App = () => {
  return (

    <Router >
      <Routes>

        <Route path="/" component={ Home }></Route>
      </Routes>
    </Router>


  )
}

export default App;

**리액트 라우터 관련 코드가 작동하지 않습니다.프로그램에 루트를 삽입했을 때 이 에러가 표시되도록 한 원인을 알 수 없습니다.**

V6 에서는,component더 이상 지지하지 않습니다.을 위해 대체되었다.element:

<Route path="/" element={<Home />}></Route>

자세한 내용은 이행 문서를 참조하십시오.

저도 같은 문제가 있었어요.컴포넌트를 엘리먼트로 교체하면 동작합니다.

치환:

<Route path="/" component={HomePage} exact />

다음과 같이 입력합니다.

<Route path="/" element={<HomePage/>} exact />

같은 에러가 있었지만 수정이 조금 달라서 요소의 철자를 틀렸습니다.

<Route exact path='/MyGames' elemtent={<MyGames/>}/>

이게 브라우저 콘솔에 표시되는 오류입니다.

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

매우 심플:

1. 사용하다element대신component
2. 컴포넌트를 다음과 같이 감습니다.{<Home/>}대신{Home}

<Route path="/" component={ <Home/> } />

버전 6의 경우:

치환된 컴포넌트element종료할 필요가 있습니다."</Route>"

 <Route exact path="/" element={<AddTutorial />}></Route>

https://reactrouter.com/docs/en/v6/getting-started/overview

react-router-dom V6을 사용하는 경우 이는 일반적인 문제입니다.이 문제를 해결하려면 간단합니다.

코드에서 구성 요소를 요소로 바꾸기 {home}을(를) {}(으)로 바꾸기

이게...<Route path="/" element=

이것으로 확실히 문제가 해결될 것이다.

react-router-dom 6 이후를 사용하는 경우 부모 및 자녀 루트를 포함하는 루트 배열이 있을 수 있습니다.그런 다음 다음과 같은 루트를 열려고 할 수 있습니다.

/portal

이 에러는, 그 컴포넌트가 자경로에 대응하고 있기 때문에 발생합니다.

/:customerid/portal

하지만 당신은 당신의 경로(그리고 그들의 자녀 경로)를 충분히 자세히 읽지 않았습니다.

언급URL : https://stackoverflow.com/questions/69854011/matched-leaf-route-at-location-does-not-have-an-element