-
React 기초 - RouterFramework & Library/React 2021. 9. 22. 18:32
<BrowserRouter> 태그
ReactDOM.render( <React.StrictMode> <BrowserRouter> <App /> </BrowserRouter> </React.StrictMode>, document.getElementById('root'), );
ㆍ 우선, index.js에서 <BrowserRouter> 태그로 App 컴포넌트를 감싸준다.
<Route> 태그
function App() { return ( <div> <Header /> <Route path="/" exact={true} component={HomePage} /> <Route path="/login" exact={true} component={LoginPage} /> <Footer /> </div> ); } export default App;
ㆍ App.js에서 <Route> 태그를 이용해서 이동할 페이지에 대한 설정을 한다.
<Link> 태그
const Header = () => { return ( <StyledHeaderDiv backgroundColor="blue"> <ul> <li> <Link to="/">홈</Link> </li> <li> <Link to="login">로그인</Link> </li> </ul> </StyledHeaderDiv> ); }; export default Header;
ㆍ Header.js에서 <Link> 태그를 이용해서 이동할 페이지에 대한 경로를 설정한다.
props의 이용
const LoginPage = (props) => { console.log(props.match.params.id); return ( <div> <button onClick={() => props.history.goBack()}>뒤로가기</button> <Login /> </div> ); }; export default LoginPage;
ㆍ props를 통해 받은 데이터를 이용해서 이전 페이지의 이동과 같은 동작을 취할 수 있다.
GitHub - qlsdud0604/react-basic: 리액트의 기초를 학습하는 공간
리액트의 기초를 학습하는 공간. Contribute to qlsdud0604/react-basic development by creating an account on GitHub.
github.com
728x90'Framework & Library > React' 카테고리의 다른 글
React 기초 - Redux (0) 2021.09.22 React 기초 - form 태그 (0) 2021.09.22 React 기초 - props (0) 2021.09.22 React 기초 - useRef 함수 (0) 2021.09.22 React 기초 - useMemo 함수 (0) 2021.09.22