react-router-dom

🖍️router란

경로에 맞는 페이지를 보여준다

~~더알아보기~~

 

 

✔️react-router를 사용하는 이유

1.  주요로직과 라우팅처리 분리
2.  '동적라우팅', '중첩라우팅' 등을 쉽게 관리

✔️react-router를 사용할때 기억해야할 3가지

<BrowserRouter>, <Routes>, <Route>

 

BrowserRouter: 브라우저에 내장되어있는 히스토리스택을 사용해 라우팅을 구현하게 해주는 컴포넌트

Routes: 

Route: Routes에 감싸지 않으면 에러가 난다

 

App.js에 사용하는 고정된 사용 방법이다

function App() {
	retrun (
    <BrowserRouter>
    	<Routes>
        	<Route path:'/' element={<main/>}></Route>
            <Route path:'/login' element={<Login/>}></Route>
            <Route path:'/page' element={<Page/>}></Route>
        </Routes>
    </BrowserRouter>
    )
}

 Route 안에는 path 와 element가 있는데 

path는 주소창에 들어갈 주소를 적으면 되고  element는 해당 주소에서 보여줄 컴포넌트를 넣어주면 된다.

 

✔️useParams()

key - Value로 이루어진 객체 형태로 이루어진 URL을 리턴해주는 훅

Route 컴포넌트에서 /:id의 키로 받도록 정의하고,

유저가 www.~~ /3으로 접속을 한다면 이하의 형태로 값을 리턴해준다

{
	id:"3"
 }

🖍️중첩라우팅 구현하기

✔️<Outlet /> 이란?

리액트 {children}과 유사한 개념으로 컴포넌트를 합성할때 자신이 감싼 하위 컴포넌트의 위치를 정해주기 위해 사용한다.

 

NavComponent.js

export const NavComponent = () => {
	return (
    	<>
        	<NavBar />
            <DefaultLayout>
            	<Outlet>
            </DefaultLayout>
            
        </>
    )
}

App.js

function App() {
	return (
    	<BrowserRouter>
        	<NavBar />
            <Routes>
            	<Route element={<NavComponent />}></Route>
                <Route path:'/' element={<main/>}></Route>
            	<Route path:'/login' element={<Login/>}></Route>
            	<Route path:'/page' element={<Page/>}></Route>
            </Routes>
        </BrowserRouter>
    )
}

위의 코드같이 작성하면 홈화면에서는 네브바가 뜨고 로그인에서는에서는 안뜨게 할 수 있다.