라우팅 이란?

URL에 따라서 그에 상응하는 화면을 전송해주는 것을 Routing이라고 한다.
리액트에서 라우팅 기능을 구현하는 것은 쉽지 않지만 React Router는 리액트에서 비교적 쉽게 라우팅이 가능하도록 도와준다.

적용 순서

리액트 파일을 만든 후 그 프로젝트 안에서

yarn add react-router-dom

위의 명령어를 통해 패키지를 다운 받는다.

그 후에 먼저 index.html 파일에서 임포트 한다.

import {BrowserRouter} from "react-router-dom";

그 후 아래와 같이

 <BrowserRouter><BrowserRouter/>

태그로 감싸준다.

그 후 App.js 에서도 import 를 해줘야 한다.

import { Route, Link } from "react-router-dom";

그 후 아래와 같이 라우팅(그 부분만 변하도록 하는것) 하고 싶은 부위에 Route 태그로 감싸면 된다.

 <Route path="'/detail">
          <Detail></Detail>
        </Route>

그 후 이런식으로 path를 지정해주게 되면 저 주소로 들어갔을 때 그 페이지가 잘 작동한다.

해당 페이지에서 값을 받기 위해 Hook을 사용하는데

import { useHistory } from "react-router-dom";

를 import 해준다. history를 이용해 페이지를 넘기기 위함.

<ItemStyle
            className="list_item"
            key={index}
            onClick={() => {
              history.push("./detail");
            }}
          >
            {list}
          </ItemStyle>

위의 history.push 는 페이지 이동을 뜻한다.

주소를 잘못 입력했을 때 알려주는법

import { Route, Switch } from "react-router-dom";

모든 Route 태그를 Switch 태그로 감싸주게 되면
내가 지정한 이외의 url에 접속했을 때, 알려줄 수 있게 된다.

<Switch>
	<Route path="/" exact>
    	<BucketList/>
    </Route>
    
    <Route path="/detail">
    	<Detail/>
    </Route>
    
</Switch>

위의 첫 Route의 exact는
url을 이동했을때 화면에 중복되는 값을 띄우게 되는데, 이를 방지하게 된다.