[React] React router dom

∙ React router dom

---

• What is React router dom ?

• 리액트에서 라우팅을 할 수 있도록 도와주는 라이브러리.
• React router dom 문서 참고

---

• How to use React router dom ?

---

• Installation.

  • npm install react-router-dom

• Connect the URL

  • import { Link } from “react-router-dom”;

  • 애플리케이션의 URL에 접근할 수 있도록 하기위해선 BrowserRouter 태그로 감싸줘야한다.

  • <BrowserRouter><App /></BrowserRouter>

• Add some Link

  • import { Link } from “react-router-dom”;

  • 네비게이션 태그안에 Link 태그를 넣어 URL을 이동시킬 수 있도록 한다.

  • 페이지를 전체 새로고침하는 a태그와는 달리 특정 컴포넌트만 업데이트한다.

  • <nav>
        <Link to ="/about">About</Link>
    </nav>
    

• Add some Routes

  • BrowserRouter 태그 안에 Routes 태그를 추가한다.

  • Routes 태그 안에 라우트 할 컴포넌트를 Route 태그로 추가한다.

  • Route 태그는 path, element 속성을 갖는다.

  • <BrowserRouter>
        <Routes>
            <Route path="/" element={<App />} />
            <Route path="about" element={<About />} />
            <Route path="users" element={<Users />} />
        </Routes>
    </BrowserRouter>,
    

• useParam

  • URL에 특정 부분을 데이터로 사용할 수 있게 도와준다.

  • :username 부분에 들어오는 값을 데이터로 이용할 수 있다.

  • ` <Route path=”/users/:username” element={} />`

  • const params = useParams();
    const userInfo = params.username;
    

• Add a No match route.

  • 일치하는 URL이 없을 시 처리 해줄 라우팅 페이지 만든다.

  • <Route
      path="*"
      element={
        <main style=>
          <p>There's nothing here!</p>
        </main>
      }
    />
    

• Nested Routes

  • Route 태그의 자식으로 또 다른 Route 태그를 넣어서 중첩 라우팅을 구현 할 수 있다.

  • <Route path="/" element={<App />}>
        <Route path="expenses" element={<Expenses />} />
        <Route path="invoices" element={<Invoices />} />
    </Route>