1. 프로젝트 준비 및 기본적인 사용법 · GitBook

[utterances-bot]

1. 프로젝트 준비 및 기본적인 사용법 · GitBook

https://react.vlpt.us/react-router/01-concepts.html

[jihwoonpark]

강의 초반부에서 server side rendering과 code splitting에 대해서 강의를 하신다고 했는데, 강의를 다 들어봐도 해당 내용 강의는 없었습니다. 강사님 홈페이지에서 server side rendering 내용을 검색해보면 클래스형 코드로 작성이 되어 있어서 이해하기가 힘듭니다. 추후에도 해당 내용 강의 계획은 없는 건가요?

[sshusshu]

react-router-dom 설치

가장 부모에 BrowserRouter로 감싸 라우터 적용 특정 주소에 컴포넌트 연결 : <Route path="주소규칙" component={보여주고싶은 컴포넌트}> exact 라는 props 를 true 로 설정하면 경로가 완벽히 똑같을때만 컴포넌트를 보여줌

다른 주소로 이동 : a 태그 대신에 Link 컴포넌트를 사용 HTML5 History API 를 사용하여 브라우저의 주소만 바꿈

[Sinseiki]

안녕하세요 선생님의 강의 잘 보고 있었습니다. 최근에 리액트 라우터 돔이 5버전에서 6버전으로 업데이트되면서 기능의 많은 부분이 바뀌었습니다. 따라서 현재 올려 주신 부분은 5버전 이하에서만 작동됩니다. 혹시 6버전에 대해서도 강의를 올려주실 계획이 있는지 여쭙고 싶습니다.

[xoxwgys56]

만약 react-router-dom@6를 찾고 계시다면, 공식 문서를 참고하시면 도움될 것 같습니다.

[yuna-c]

저는 왜 이게 안될까요..?

[xoxwgys56]

@yuna-c 사용하시는 react-router-dom의 버전을 확인해보시는게 좋습니다.
별도의 버전을 명시하지 않고 의존성을 추가하면 6버전으로 추가됩니다. 위 강의는 5버전 기준으로 만들어져있습니다.

아래와 같은 차이가 있습니다 (차이점을 보여드리기 위해 일부 코드를 생략했습니다.):

// version 5
import { Route } from 'react-router-dom';

<div>
      <Route path="/" exact={true} component={Home} />
</div>

// version 6
import { Route, Routes } from "react-router-dom";

<div>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
</div>

v6에는 exact 키워드가 존재하지 않습니다.

[hueleev]

"react-router-dom": "^6.3.0", 기준,

<Routes>
      <Route path="/" exact={true} element={<Home />} />
      <Route path="/about" element={<About />} />
</Routes>

[hunderboy]

react-router-dom 버전이 6버전으로 올라간 이후, 코드 작성방식이 많이 바뀌었습니다. 재촬영 해야할 수준으로요. 공부하시는 분들은 그점 참고해서 공부하세요