리액트-페이지 나누기(라우팅)
여러 페이지를 만들고 싶다면 라우터 를 이용한다.
공식 라이브러리인
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>
태그도 이용할 수 있다.
HashRouter 사용시 URL 뒤에 /#/ 이 붙은 채로 시작한다.
현재로서는 무언가 요청할 서버가 없는데 잘못하면
서버가 있지도 않은 페이지를 찾으려 해서 오류가 날 수 있다.
브라우저 주소창에서 # 뒤에 붙은 것들은 서버에 요청할 수 없기 때문에 방패막? 같은 느낌이다.
라우팅하기 위해
- 터미널에
- 여러 태그들을 import해준다.
import { Link, Route, Switch } from 'react-router-dom';
- 원하는 곳에
<Route><Route/>
태그를 작성해준다. <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>
Author And Source
이 문제에 관하여(리액트-페이지 나누기(라우팅)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@dnjswn123/리액트-페이지-나누기라우팅저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)