如何使用 URL 选择材质 UI 选项卡

Question

我正在尝试找到一种使用 URL 控制所选选项卡的方法。到目前为止，我可以通过在构造函数中执行此操作来设置组件加载时的选定选项卡：

let selectedTab = 0;
props.layout.map((element, index) => {
if (element.name === props.startingTab) {
selectedTab = index;
}
})
this.state = {
value: selectedTab
}

布局是传递到选项卡组件的对象数组，其中包括要显示的组件、显示顺序及其显示名称。

我还可以在单击其他选项卡时解析 URL，并通过执行以下操作正确更新它：

const url = this.props.match.url;
const layout = this.props.layout;
this.props.history.push(`${url.substr(0, url.lastIndexOf('/') +1)}${layout[value].name}`)

但是对于用户来说，这些都没有，并且解析URL感觉很笨拙。

有没有更好的方法？我现在使用的是 React Router v4 和本机 React 状态。

Answer 1

React Router 在同一应用程序中不支持BrowserRouter+HashRouter。如果您使用href道具将每个选项卡设置为单独的路径，它将起作用。