[React] React-router v6

[React] React-router v6

728x90

React Router 버전이 v5에서 v6으로 바뀌면서

몇가지 바뀐 점들이 있다.

import React from 'react'; import { Route, Routes } from 'react-router-dom'; import PostListPage from './pages/PostListPage'; import LoginPage from './pages/LoginPage'; import RegistePage from './pages/RegistePage'; import WritePage from './pages/WritePage'; import PostPage from './pages/PostPage'; const App = () => { return ( } /> } /> } /> } /> } path="/@:username/:postId" /> ); }; export default App;

v6에서는 안에 가 나와야하며

라우터 태그에서 컴포넌트 전환은 element로 한다.

path가 2개 이상일 때는

} />

위와 같이 path={('/@:username', '/')}로 중괄호, 소괄호로 묶어준 후, 따옴표로 구분하여 작성해주면 된다.

exact를 작성하지 않아도 기본으로 path안에 써진 경로들만 해당 컴포넌트가 나타난다.

728x90

from http://seongyeoni.tistory.com/126 by ccl(A) rewrite - 2021-12-26 18:26:59