[스파르타 코딩클럽 리액트 3주차-4 강의내용]
yarn add react-router-dom
설치해준다.
app.js파일에 붙여넣기
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
basic routing전체 내용을 복붙해보고 브라우저를 보면
이렇게 주소가 변하는것을 확인 할 수있다.
라우터 안의 각각의 컴포넌트 화면을 보여주는 것!
<Route path="주소[/home 처럼 /와 주소를 적어요]" component={[보여줄 컴포넌트]}/>
방법2. 넘겨줄 props가 있을때
<Route path="주소[/home 처럼 /와 주소를 적어요]" render={(props) => (<BucketList list={this.state.list} />)} />
/가 붙으면서 home화면까지 같이 불러와준다.
이럴땐 exact만 붙여주면된다.
app.js파일
about.js파일
브라우저 확인
이름에 받아온 값을 넣어주기
뒤로가기 버튼도 추가되어있음
<button onclick={() => {
this.props.history.push('/About/Jenna')
}}>/About으로 가기</button>
<button onClick={() => {
this.props.history.goBack();
}}>뒤로가기</button>