React, React-Router

React-Router

 

리액트는 SPA (Single Page Application) 방식

 

일반적으로 클라이언트가 요청을 하면 서버에서 요청한 페이지를 보여준다.

그러면서 로딩되는 모습이 보인다. 하지만 리액트는 모든 문서를 다 읽어드린 다음 클라이언트가 요청을 하면 로딩을 하지 않고 바로 보여주기 때문에 속도가 빠르다.

 

[설치]

npm install react-router-dom

yarn add react-router-dom

 

# react-router-dom 변경사항 (2021. 11. 25 기준)

1. Route 컴포넌트를 이제는 Routes 컴포넌트로 필히 감싸주어야 한다.

2. Route 컴포넌트의 매개변수 compent 가 element 로 바뀌었다.

3. useHistory 사라짐 -> useNavigate 함수

4. history.push('/') -> navigate('/')

 

Route : 어떤 경로로 들어왔을 때 어떤 컴포넌트를 보여 주겠다

Link : Router의 주소를 바꿈, a 태그지만 새로 고침이 안 된다.

 

<BrowserRouter>

    <Routes>

        <Route></Route>

    </Routes>

</BrowserRouter>

 

Route : 연결해주겠다는 얘기

 

 

<BrowserRouter>
    {/* 프레그먼트 */}
    <>
        <NavBar/>
    </>
    
    {/* 화면에 보이는 영역 */}
    <Routes>
        <Route path='/' element={<Home/>}></Route> 
        <Route path='/about' element={<About/>}></Route>
        <Route path='/ceo' element={<Ceo/>}></Route>
        <Route path='/sub01' element={<Sub01/>}></Route>
        <Route path='*' element={<NotFiles/>}></Route>
    </Routes>

</BrowserRouter>