React 기초 - Router

<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: 리액트의 기초를 학습하는 공간