Coding Apple, React 강좌 내용 정리.10 - 쇼핑몰 비슷하게 만들어 보기.3 : router

router (routing) : 페이지 나누기. 분기 (라우팅)

'react-router-dom' 라이브러리를 사용한다.

터미널에서 npm install react-router-dom 명령어를 넣어서 설치한다

 

router 설정

index.js 파일에서

import {BrowserRouter} from 'react-router-dom'
---

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      // App을 감싼다
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

[ HashRouter ] 를 쓴다면. 그러면 #/Routing으로 표시할 수도 있다. (BrowserRouter는 # 가 없다)

라우팅을 안전할수있게 도와줄 수 있다.

Browser router : 라우팅을 리액트가 아니라 서버에게 요청할 수도 있어서 위험

서버에서 서버 라우팅 방지하는 API를 작성해둬야 한다.

 

<아직 자세한건 공부해가면서 봐야 할것같다.>

---

App.js 에서 (즉 작업할 js 파일)

필요한 컴포넌트 (Link, Route, Switch 등)을 등록한다.

import 작업

import {Link, Route, Switch} from 'react-router-dom'

본문에 사용

사용법 1. <Route ~ path >

<Route path="/"> // Home

    <div>메인페이지에서 보여줄 내용</div>

</Route>

<Route path="/detail">  // /detail 페이지 쓸 때

    <div>디테일 페이지에서 보여줄 내용</div>

</Route>

 

이제 Route내부에 보여줄 화면을 넣으면 된다

너무 길면 컴포넌트 화해서 만들면 된다.

{/* 홈 페이지 */}

  {/* 공통적으로 보여줄 부분. 네비게이션바 등 */}
  <Navbar bg="light" expand="lg">
      
     {/* '/' , 홈 에서 보여줄 부분, '/' : 홈 일때만 보여준다 */}
      <Route exact path="/">
        ---
      	<Card style={{ width: 100%' }}>
      		...

 

 

사용법 2. 컴포넌트 자체를 보여줄 때

<Route path="/AA" component={Detail}></Route>

 

   /detail 경로로 접속해도 '/' 경로 내용이 나오는 이유?   

기본적으로 매칭이 되는 것들은 다 보여준다. 

(  '/detail'에 '/' 도 있기에)

 

그게 싫다면, exact를 붙인다.

<Route exact path="/">

 

React Router 특징

html 내부의 내용을 갈아치워서 다른 페이지처럼 보여주는 것