React Error: [Home] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment> 오류 해결법

Error: [Home] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

 

 

리액트를 처음 공부하는 거라

클론 코딩을 통해 공부를 하다 보니 이런 오류가 떠서 막혔습니다.

 

해당 오류는 Routes 컴포넌트 안에는 자식 요소로 Route 또는 React.Fragment만 들어갈 수 있다는 뜻으로,

그 외에 코드가 들어가게 되면 오류가 뜹니다.

 

기존 코드같은 경우는 Switch를 이용하였는데 업데이트가 되면서 Switch대신 Routes를 사용한다고 합니다.

이후에 Route 컴포넌트 내에 element 속성을 이용해서 원하는 컴포넌트를 넣게 됩니다.

 

 

기존 오류 코드

1

<Switch>
                {isLoggedIn ? (
                    <>
                        <Route exact path="/">
                            <Home/>
                        </Route>
                    </> 
                ) : (
                    <Route exact path="/">
                        
                        <Auth />
                    </Route>
                )}

            </Switch>

 

2

            <Routes>
                {isLoggedIn ? (
                    <>
                        <Route exact path="/" element={<Home/>}>
                            <Home/>
                        </Route>
                    </> 
                ) : (
                    <Route exact path="/" element={<Auth/>}>
                        
                        <Auth />
                    </Route>
                )}

            </Routes>

 

여기에 Route 부분 안쪽에 <Home/> 또는 <Auth/>가 없어야 합니다.

 

변경 완료

 

<Router>
            <Routes>
                {isLoggedIn ? (
                    <>
                        <Route exact path="/" element={<Home/>}>
 
                        </Route>
                    </> 
                ) : (
                    <Route exact path="/" element={<Auth/>}>

                    </Route>
                )}

            </Routes>
        </Router>