[React] 리액트 Router

1. react-router

- 해당되는 URL에 따라 페이지를 이동하는 것을 Routing이라고 함. 

- React-Router는 리액트의 네비게이션 라이브러리로 사용됨.

 

react-router-dom라이브러리

1) Link

- to ="URL"을 통해서 이동경로를 지정해줌.

<Link to ="/home"> Home</Link>

2) Router

- Route와 Link컴포넌트를 유기적으로 묶어주며,  route와 link 컴포넌트는 항상 router를 상위 컴포넌트로 가져야함

<Router>
	<Link />
    <Link />
    <Router />
    
</Router>

실제로 라우팅 구현

<Router>
            
            <Routes>
                <Route path="/" element={<Home />} exact />
                <Route path="/signin" element={<SigninPage />} exact />
                <Route path="/signup" element={<SignUpPage />} exact />
                <Route path="/MyInfo" element={<MyPage />} exact />
                <Route path="/forgotIdPw" element={<FindIdPw />} exact />
            </Routes>
</Router>

- <Routes>컴포넌트는 여러개의 Route를 감싸고, 그 중 규칙이 일치하는 Route를 렌더링 시켜줌.

 

-<Route>는 path="", element 에는 컴포넌트를 넣어줌.