React Router 選項卡——保持組件掛載

Question

我使用 React Router 創建了選項卡，每個選項卡都有不同的路由。 但是，我想通過安裝隱藏的選項卡來保持選項卡轉換之間的選項卡狀態。 我如何實現這一目標？ 每次路由切換時，React 路由器都會重新安裝每個組件。

這里已經有人問過這個問題了，但是沒有得到答復

理想情況下，我會找到一個解決方案，使第一次點擊后未顯示的選項卡保持安裝狀態

Answer 1

我必須做更多的挖掘以確認這確實有效，但是通過閱讀 React Router 文檔，我發現了有關Route組件的內容。 每次路由更改時，使用component道具都會重新安裝組件。 但是使用其他渲染方法，您可能能夠實現您想要的。 我會使用render ，但children也可以工作嗎？

Answer 2

這是 react-router-dom-v5 doc 在<Route/> render 、 children和component prop 上推薦的路由方法。 這樣我們的組件就會在每次路徑匹配時重新初始化和重新安裝。

 <Switch>
    <Route exact path="/">
       <Home />
    </Route>
    <Route path="/contact">
       <Contact />
     Route>
    <Route path="/about">
       <About />
    </Route>
 </Switch>

由於您（Kat）希望通過安裝隱藏的選項卡來保持選項卡轉換之間的選項卡狀態。

• 您可以通過一次安裝所有選項卡，然后使用react-router-dom的pathname在選項卡之間切換來實現此目的。

const { pathname } = useLocation();
{pathname === "/"? <Home/>: null}
{pathname === "/contact"? <Contact/>: null}
{pathname === "/about"? <About/>: null}

• 這樣，您的組件不會在每次路徑匹配時重新初始化和重新安裝，因此組件狀態不會受到干擾，並且會在選項卡上自動處理。
• 這是工作演示： https : //codesandbox.io/s/react-router-experiment-ilfhq? file =/ src/component/Home.js : 166-201
• 希望我回答了你的問題。
• 這是使用CSS的第二個解決方案演示： https : //codesandbox.io/s/react-router-moud-routes-32dxf? file =/ src / App.js