[React] Router 관련 에러 해결 - React Router v6

공식문서

🚨All component children of <Routes> must be a <Route> or <React.Fragment>

<Route exact path="/" >
	< Home />
</Route >

💡react-router-dom v6부터는

• Switch 대신 < Routes />를 사용
• Route 안에 component 대신 element 사용

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

또한, <Routes />안에는 <Route />만 와야 한다.

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

🚨Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.

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

💡element안에서 <컴포넌트명 />처럼 JSX형으로 호출하자! 공식문서

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

kinkyu1 year ago
How to delete /#/ on URL?

1

serranoarevalo1 year ago
@kinkyu Use BrowserRouter instead of HashRouter