오류: [Home]이(가) 구성 요소가 아닙니다. 의 모든 구성 요소는 또는이어야 합니다.

오류: [Home]이(가) 구성 요소가 아닙니다. 의 모든 구성 요소는 또는이어야 합니다.

여러분, 저는 제 앱을 만들려고 하는데 리액트 라우터-dom을 6.02로 업데이트한 후 이 오류가 발생합니다.

오류: [Home]은(는) Route 구성 요소가 아닙니다.Routes의 모든 컴포넌트 자식은 Route 또는 <React>여야 합니다.프래그먼트>

코드는 다음과 같습니다.

import { BrowserRouter, Route, Routes } from "react-router-dom";
import Navbar from "./components/Navbar/Navbar";
import Home from "./pages/home/Home";
import Login from "./pages/login/Login";
import Signup from "./pages/signup/Signup";

function App() {
  return (
    <div className="App">
      <BrowserRouter>
          <Navbar />
          <Routes>
            <Route exact path="/">
              <Home />
            </Route>
            <Route path="/login">
              <Login />
            </Route>
            <Route path="/signup">
              <Signup />
            </Route>
          </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

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

react-router 6은 다음과 같은 하위 소품을 예약하기 때문에 이 변경이 필요합니다.<Route>네스트 루트의 경우.

v6로의 이행

리액트 라우터 패키지에는 버전에 관한 코드 변경이 있습니다.

// React router v4 or v5
<Route path="/" component={Home} /> 

// React router v5.1
<Route exact path="/">
    <Home />
</Route>

// React router v6
<Route path="/" element={<Home />} /> 

상세: 리액트 라우터 - V6로의 업그레이드

따라서 V6 구문을 사용하여 이 문제를 해결할 수 있습니다.

이 오류는 react-router-dom 라이브러리의 새로운 업그레이드 때문에 발생합니다.

이것이 당신의 문제에 대한 해결책입니다.

    import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

        function App() {
      return (
  <div className="App">
    <Router>
        <Navbar />
        <Routes>
        <Route exact path='/' element={<Home />} />
        <Route path='/register' element={<Signup />} />
        <Route path='/Login' element={<Login />} />
        </Routes>
    </Router>
  </div>
       
      );
    }
    
    export default App;

이것이 이 버전의 해결책입니다. "react-router-dom": "^6.0.2",

주의: - 의 새로운 버전에는 이 기능보다 몇 가지 더 많은 기능이 있습니다.react-router-dom. https://reactrouter.com/docs/en/v6

저도 같은 문제가 있습니다.v6를 사용하면 루트에 close 태그를 사용하지 않고 요소 속성을 사용하여 컴포넌트를 정의합니다.홈 라우트의 경우 이 작업을 수행해야 합니다.

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

동일한 컴포넌트 아래의 여러 컴포넌트에 대해 고정Route. 여러 컴포넌트를 내부에 감습니다.<>그리고.</>태그를 지정합니다.

<Route exact path="/" element={<><AddTodo addTodo={addTodo} /><Todos todos={todos} onDelete={onDelete} /></>} />

검출되지 않은 오류: [Home]은(는) 컴포넌트가 아닙니다.의 모든 구성 요소는 또는이어야 합니다.<React.Fragment>솔루션

function App() {
  return (
    <>
      <Router>
        <Routes>
          <Route exact path="/" element={<Home />} />
        </Routes>
      </Router>
    </>
  );
}

언급URL : https://stackoverflow.com/questions/69975792/error-home-is-not-a-route-component-all-component-children-of-routes-mus