Antdesign 選項卡反應路由器導航

Question

我正在嘗試使用具有導航功能的標簽，但是當我 go 后標簽沒有改變時。 例如，我移動到 tab2，然后單擊 go 返回。 內容和活動標簽不會改變。

代碼框示例

有人有想法嗎？

- 解決方案 -

解決方案添加到示例。 :)

Answer 1

defaultActiveKey 只是在初始加載時。 請改用活動密鑰。

    <Tabs
      activeKey={(match.params.source ? match.params.source : "")}
      onChange={(key) => {
        history.push(`/${key}`);
      }}
      tabBarGutter={10}
    >
      <TabPane tab="tab1" key="">
        <p>TabPane1</p>
      </TabPane>
      <TabPane tab="tab2" key="tab2">
        <p>TabPane2</p>
      </TabPane>
    </Tabs>

注意：由於 match.params.source 最初是未定義的，我必須在 activeKey 中添加該檢查，以便在未設置時將默認設置為“”。

• page.js 中不需要該開關。

Answer 2

您必須為<TabPane />組件指定一個關鍵參數，因為您在 onChange 處理程序上使用它。 否則，您將在 url 中看到null 。 像這樣的東西： https://blablabla/null因為你聲明了像<Route path={"/:source?"} component={page} exact={false} />這樣的路線另一方面，你沒有必須在page.js文件中指定另一個 Switch 組件，因為您在 Parent ( App.js ) 上指定了它

這是工作代碼：

page.js

     <Tabs
        defaultActiveKey={match.params.source}
        onChange={(key) => {
          history.push(`/${key}`);
        }}
        tabBarGutter={10}
      >
        <TabPane tab="tab1" key="tab1">
          <p>TabPane1</p>
        </TabPane>
        <TabPane tab="tab2" key="tab2">
          <p>TabPane2</p>
        </TabPane>
      </Tabs>

應用程序.js

<Router>
  <Switch>
    <Route path={"/:source?"} component={page} exact={false} />
  </Switch>
</Router>