react-router - 如何让semantic-ui-react Tab 单击使用react-router NavLink 来更新URL？

Question

我正在使用语义 UI 的 Tab 组件，并且在每个选项卡的 Pane 中都有不同的组件。当我单击一个选项卡时，我希望 URL 更改为“/tabname”，以便只需要该选项卡中的功能的用户可以为特定选项卡添加书签。

Semantic-ui 站点上的所有示例都定义了如下代码所示的选项卡。

const panes = [
  { menuItem: 'Component 1', render: () => <Tab.Pane><Component1 /></Tab.Pane> },
  { menuItem: 'Component 2', render: () => <Tab.Pane><Component2 /></Tab.Pane> }
]

render() {
  return (
    <Tab panes={panes} />
  )
}

我尝试将 menuItem 更改为:

{ menuItem: () => <NavLink to="/component2">Component 2</NavLink>, render: () => <Tab.Pane><Component2 /></Tab.Pane> }

或这个:

{ menuItem: () => <Menu.Item as={Link} to="/component2">Component 2</Menu.Item>, render: () => <Tab.Pane><Component2 /></Tab.Pane> }

虽然它确实改变了链接，但它也禁用了选项卡切换(因此单击“组件 2”选项卡会将“/component2”添加到 URL，但 <Component1 /> 仍显示在 Pane 中)。问题是 Tab 的 onClick 事件被 Link 的 onClick 事件覆盖，因此它中断了选项卡切换。

必须有一种方法可以使选项卡更改链接并更改 Pane 内容。 Semantic-ui-react 的组件增强功能应该可以解决此类问题，但它似乎无法使用 Tab 组件。如果他们的文档不是纸薄的就好了。

Answer 1

这里回答了一个类似的问题。
https://github.com/Semantic-Org/Semantic-UI-React/issues/3935
示例代码在这里:
https://codesandbox.io/s/react-example-5jtuo?file=/index.js
我不知道代码片段是如何工作的。
我更喜欢使用代码沙箱。
如果有人想修复代码片段并分享，那就太棒了。
我只是复制了代码，以便将来代码沙箱出现故障时可以看到它。

import "react-app-polyfill/ie11";
import "react-app-polyfill/stable";
import ReactDOM from "react-dom";
import React, { Component } from "react";
import { Tab } from "semantic-ui-react";
import {
  BrowserRouter as Router,
  Route,
  NavLink,
  Switch
} from "react-router-dom";

import "semantic-ui-css/semantic.min.css";

class App extends Component {
  render() {
    const panes = [
      {
        menuItem: {
          as: NavLink,
          id: "tab1",
          content: "Home",
          to: "/",
          exact: true,
          key: "home"
        },
        pane: (
          <Route
            path="/"
            exact
            render={() => (
              <Tab.Pane>
                <div>Home</div>
              </Tab.Pane>
            )}
          />
        )
      },
      {
        menuItem: {
          as: NavLink,
          id: "tab2",
          content: "Authentication",
          to: "/auth",
          exact: true,
          key: "auth"
        },
        pane: (
          <Route
            path="/auth"
            exact
            render={() => (
              <Tab.Pane>
                <div>Authentication content here</div>
              </Tab.Pane>
            )}
          />
        )
      },
      {
        menuItem: {
          as: NavLink,
          id: "tab3",
          content: "Config Lists",
          to: "/configs",
          exact: true,
          key: "configs"
        },
        pane: (
          <Route
            path="/configs"
            exact
            render={() => (
              <Tab.Pane>
                <div>Config Lists content here</div>
              </Tab.Pane>
            )}
          />
        )
      }
    ];

    return (
      <Router>
        <div className="App" style={{ margin: "50px" }}>
          <Switch>
            <Tab renderActiveOnly={false} activeIndex={-1} panes={panes} />
          </Switch>
        </div>
      </Router>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/react-router-dom/umd/react-router-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui-react/1.2.0/semantic-ui-react.min.js"></script>
<div id="root"></div>