[React] react-router-dom v6에서 Route로 props 보내기

장바구니 모달 창은 헤더 컴포넌트에 있으며 헤더 컴포넌트를 통해서도 모달창을 열 수 있고, 상품디테일 페이지에서 Add to Cart 버튼을 클릭 시에도 모달창이 자동적으로 뜨게끔 구현해야 했습니다. 따라서 이 두 개의 컴포넌트가 만나는 부분에서 상태관리를 해야 하는데 만나는 부분이 Router.js 였기 때문에 Route로 감싸여진 컴포넌트로 props를 보내야 했습니다.
v5에서는 좀 더 복잡한 방법이었다면 v6에서는 해당 컴포넌트에 props를 주듯이 주면 간단하게 해결됩니다.

<Route path="경로" element={<컴포넌트 props={props} />} />

// Router.js
const Router = () => {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <BrowserRouter>
      <ScrollToTop />
      <Header setIsOpen={setIsOpen} isOpen={isOpen} />
      <Routes>
        <Route path="/" element={<Main />} />
        <Route path="/login" element={<Login />} />
        <Route path="/register" element={<Register />} />
        <Route path="/products/:category_id" element={<ProductList />} />
        <Route
          path="/product/:id"
          element={<ProductDetail setIsOpen={setIsOpen} isOpen={isOpen} />}
        />
        <Route
          path="/cart"
          element={<Cart />}
        />
        <Route path="/search" element={<SearchList />} />
        <Route path="/aboutus" element={<AboutUs />} />
      </Routes>
      <Footer />
    </BrowserRouter>
  );
};