리액트-페이지 나누기(라우팅)

여러 페이지를 만들고 싶다면 라우터 를 이용한다.

공식 라이브러리인

react-router-dom

을 사용한다.

• 설치법
  • 터미널에 npm install react-router-dom@5 혹은 yarn add react-router-dom@5 설치하기
  • index.js 파일에 가서 기존 코드들 사이에

    import 어쩌구 많은곳;
    import { BrowserRouter } from 'react-router-dom';
    ReactDOM.render(
    <React.StrictMode>
      <BrowserRouter>
        <App/>
      </BrowserRouter>
    </React.StrictMode>
    document.getElementById('root')
    );

    입력해준다.

    <BrowserRouter> 말고 <HashRouter> 태그도 이용할 수 있다.

    Browser 단어 대신 Hash로 모두 바꿔주면 되며,
    HashRouter 사용시 URL 뒤에 /#/ 이 붙은 채로 시작한다.
    현재로서는 무언가 요청할 서버가 없는데 잘못하면
    서버가 있지도 않은 페이지를 찾으려 해서 오류가 날 수 있다.
    브라우저 주소창에서 # 뒤에 붙은 것들은 서버에 요청할 수 없기 때문에 방패막? 같은 느낌이다.

    ---

    라우팅하기 위해

1. 여러 태그들을 import해준다.
   import { Link, Route, Switch } from 'react-router-dom';
2. 원하는 곳에 <Route><Route/> 태그를 작성해준다.
3. <Route> 안에 path와, path방문시 보여줄 HTML을 작성한다.

import 많은 곳;
import { Link, Route, Switch } from 'react-router-dom';

function App(){
  return (
    <div>
      어쩌구저쩌구
      <Route path="/"> 
        <div>메인페이지</div>
      </Route>
      <Route path="/detail">
        <div>디테일페이지</div>
      </Route>
    </div>
  )
}

또한

<Route path="/어쩌구" component={Card} ></Route> 

또는

<Route path="/어쩌구"> <Card/> </Route> 

위와 같이 컴포넌트를 넣어줄 수도 있다.

React-Router는 각각 다른 HTML을 보여주는게 아니라 내부를 완전히 교체해 다른 페이지처럼 보이는 것뿐

/detail 이라고 해도 메인 페이지도 보이는 이유는?

/detail 에는 / 라는 경로도 포함되어 있기 때문이다.

이러한 상황을 방지하려면 exact 라는 속성 사용한다.

<Route exact path="/"> 
  <div>메인페이지</div> 
</Route>