Router

Routing이란?

어떤 URL에서 어떤 화면을 보여줄 것 인가를 정하는 것

 

<BrowserRouter> Connect the URL 

URL을 연결 시킨 뒤에 (모든 라우터 컴포넌트는 BrowserRouter 하위에 있어야 한다)

First things first, we want to connect your app to the browser's URL: import BrowserRouter and render it around your whole app.

    <BrowserRouter>

          <Routes>

            <Route path="/" element={<Main />} />

          </Routes>

    </BrowserRouter>

 

 

 

<Routes>, <Route> Add Some Routes

자 이제 <Route path="/">이 되어있으므로 URL에 /를 입력하면 <Main />컴포넌트로 화면 전환이 일어난다

 

<Link> Add Some Links

nav li ul <a href="abc">의 패턴에서 a href와 같은 역할. 사용법은 아래와 같다. to 뒤에 이동한 url을 넣어주면 된다.

 

자 이제 works라는 링크를 클릭하면 works 컴포넌트로 화면 전환이 일어난다. 이 때 Route에 works가 미리 정의되어 있지 않다면 실제 화면 전환은 이러나지 않는다. 즉 클릭시 URL만 바꿔주고 실제 화면전환은 Route컴포넌트에서 일어난다. 즉 about 링크를 클릭해도 화면전환은 일어나지 않는다

//import 전부 생략
function App() {
  {
    return (
      <div className={styles.app}>
        <BrowserRouter>
          <Header />
          <Nav />
          <Routes>
            <Route path="works" element={<Works />} />
          </Routes>
        </BrowserRouter>
      </div>
    );
  }
}

const Nav = () => (
  <nav>
    <Link to="/works">Works</Link>
    <Link to="/about">About</Link>
  </nav>
);