[ReactJS] react-router-dom V6 바뀐 라우팅

v6 로 넘어오며 많은것이 바뀌게 되었습니다.

우선, 간단한 내용부터 천천히 넘어가보도록 하겠습니다.

 

---

라우팅의 변화

  기본적인 변화

V5 에서는 아래와 같은 코드로도 작동이 되었습니다.

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

const App = () => {
	return(
    	<Router>
        	<Switch>
            	<Route exact path="/" component={Home} />
            </Switch>
        </Router>
    )
}

export default App;

 

하지만, V6로 넘어오며

Switch -> Routes

component -> element

 

이렇게 변경이 되었습니다.

이렇게 변화가 되면서 element 에는 {Home} 이 아닌 태그로 작성을 해야 정상적인 작동을 하게 됩니다.

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

const App = () => {
	return(
    	<Router>
        	<Routes>
            	<Route exact path="/" element=<DefaultLayout/> >
                	<Route index element = <Home/> />
                	<Route path='sub' element = <Sub/> />
                </Route>
            </Routes>
        </Router>
    )
}

export default App;

// Route 의 속성들은 이렇게 들어가게 됩니다.
export interface RouteObject {
  caseSensitive?: boolean;
  children?: RouteObject[];
  element?: React.ReactNode;
  index?: boolean;
  path?: string;
}

  useRoutes 의 등장

import {useRoutes} from 'react-router-dom';
import DefaultLayout from './layout/DefaultLayout'
import Home from './pages/Home';
import Sub from './pages/Sub';

const App = () => {

	const element = useRoutes([
    	{
        path : '/' ,
        element : <DefaultLayout /> ,
        children : [
        	{ index:true , element : <Home /> },
        	{ path:'sub' , element : <Sub /> },
        ]
        }
    ]);
    
	return element;
}

export default App;

 

위 코드를 보면 아시겠지만,  useRoutes 에 배열로 라우팅을 해주는 방식 입니다.

 

우선, index 는 http://localhost:3000/ 으로 접속을 햇을 때 DefaultLayout 을 기준으로 들어가게 됩니다, 하지만 아래 children의 path 에도 '/' 을 넣게 된다면 경로가 http://localhost:3000// 으로 선언이 되어버려 골머리를 앓게 됩니다. 그렇기 때문에 path 를 넣는것이 아닌 / 으로 접속을 했을 때 이 레이아웃 밑에 이 페이지를 보여달라는 식으로 index : true 를 적어주면 루트 경로로 이동을 했을 때 문제없이 렌더링이 잘 되게 됩니다.

 

그리고 path 에 sub 를 입력하면 http://localhost:3000/sub 로 이동을 하게 됩니다. 이를 응용하여. children 밑에 children 을 넣을 수 있습니다.

 

중첩 렌더링

  children 에서 Outlet 으로

기존에 중첩 랜더링을 할 때 즉, 대부분 레이아웃을 구성할 때 props에 children을 받아와서 아래와 비슷한 형식으로 코드를 작성하시게 될 것 입니다.

const DefaultLayout = ({children}) => {
	return <div>
    	<nav></nav>
        {children}
    </div>;
}

export default App;

 

하지만, 이제는 react-router-dom 에서 지원하는 <Outlet /> 이라는 태그를 이용해서 중첩 라우팅을 하실 수 있습니다.

import {Outlet} from 'react-router-dom'
const DefaultLayout = ({children}) => {
	return <div>
    	<nav></nav>
        <Outlet />
    </div>;
}

export default App;

 

그리고 라우팅 코드는 위 라우팅의 변화 부분을 봐주시면 감사하겠습니다.

 

훅의 변화

  useHistory ->  useNavigate

V6 에서는 useHistory 의 네이밍이 useNavigate 로 변경이 되었습니다.

 

const navigate = useNavigate();

const handleClick = () => navigate('/home')

return (
	<button onClick={handleClick}> 이동 </button>
)