如何使语义 ui-react 选项卡单击使用反应路由器导航链接来更新 URL?

Question

我正在使用semantic-ui的选项卡组件，并且每个选项卡的窗格中都有不同的组件。当我单击选项卡时，我希望URL更改为"/tabname"，以便只需要该选项卡中的功能的用户可以为特定选项卡添加书签。

语义 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: () => <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 />仍显示在窗格中(。问题是 Tab 的 onClick 事件被 Link 的 onClick 事件覆盖，因此它会中断制表符切换。

必须有一种方法可以使选项卡更改链接并更改窗格内容。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>

Answer 2

你应该试试这个：

const panes = [
{ menuItem: 'Component 1', render: () => <Tab.Pane as="NavLink" to="/component1"><Component1 /></Tab.Pane> },
{ menuItem: 'Component 2', render: () => <Tab.Pane as="NavLink" to="/component2"><Component2 /></Tab.Pane> }
]
render() {
return (
<Tab panes={panes} />
)
}