[react]react-router-dom v 6からropsをrouteに送信

7047 ワード
React react router dom テキストリンク
カートモードウィンドウはタイトルコンポーネントにあり、헤더 컴포넌트でモードウィンドウを開くか、상품디테일 페이지からAdd to Cartボタンをクリックして自動的にモードウィンドウを開くことができます.そのため,両素子の接触箇所で状態管理を行う必要があるが,接触する部分はRouterである.jsなので、Routeを含むコンポーネントにpropsを送信する必要があります.
V 5においてより複雑な方法であれば、V 6においては、素子に支柱を設けるようにすれば、問題を容易に解決することができる.
<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>
  );
};
リストコレクションの例
フロントエンドリソースのロード再試行