2. Routes

실습 레포

import { Routes, Route } from "react-router-dom";

function App() {
  return (
    <div>
      <Header />
      <main>
        <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/about" element={<AboutPage />} />
        </Routes>
      </main>
      <Footer />
    </div>
  );
}

BrowserRouter

import { BrowserRouter } from "react-router-dom";

root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

MemoryRouter

테스트 코드에선 메모리 라우터를 사용한다.

describe("App", () => {
  function renderApp(path: string) {
    render(
      <MemoryRouter initialEntries={[path]}>
        <App />
      </MemoryRouter>
    );
  }

  context("when the current path is “/”", () => {
    it("renders the home page", () => {
      renderApp("/");

      screen.getByText(/Hello/);
    });
  });

  context("when the current path is “/about”", () => {
    it("renders the about page", () => {
      renderApp("/about");

      screen.getByText(/About/);
    });
  });
});