npm install sass --save
npm install react-router-dom --save
ReactDOM.render(<Routes />, document.getElementById('root'));
import React from 'react';
import {
BrowserRouter as Router,
Route,
Switch,
} from 'react-router-dom';
import Home from './Pages/Home';
import Signup from './Pages/Signup';
class Routes extends React.Component {
render() {
return (
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/signup" component={Signup} />
</Switch>
</Router>
)
}
}
export default Routes;
import React from 'react';
import { Link } from 'react-router-dom';
class Login extends React.Component {
render() {
return (
<div>
<Link to="/signup">회원가입</Link>
</div>
)
}
}
export default Login;
=> react-router-dom에서 제공하는 Link 컴포넌트는 dom에서 <a>
로 변환되므로, 혹시 a태그를 사용하고 싶지 않다면 Link를 사용하지 않아도된다. (예로 이미 다른 태그로 버튼 컴포넌트를 만들어 놓았을 경우)
Link를 사용하지 않고, 요소에 onClick 이벤트를 달아서 이동하고 싶은 곳으로 넘기는 방법도 있습니다. 아래 goToSignUp이라는 event handler에서 구현한 것 처럼 this.props의 history에 접근해서 이동할 수 있다.
받은 history의 push 메서드에 이동할 path를 인자로 넘겨주면, 해당 라우트로 이동할 수 있다.
import React from 'react';
import { withRouter } from 'react-router-dom';
class Login extends React.Component {
goToSignup() {
this.props.history.push('/signup');
}
render() {
return (
<div>
<div
class="btn signup-btn"
onClick={this.goToSignup.bind(this)}
>
회원가입
</div>
</div>
)
}
}
export default withRouter(Login);