Question

请考虑一下我具有以下（非常简化的）选项卡组件：

<Tabs
    value={this.state.tab_idx /*will be changed to use route instead of idx*/}
    onChange={this.handleChangeIndex}
    indicatorColor="primary"
    textColor="primary"
    fullWidth
>
    <Tab label="Overview" component={Link} to="overiew"/>
    <Tab label="Users" component={Link} to="users"/>
    <Tab label="etc" component={Link} to="etc"/>
</Tabs>

现在，这是文档树的一部分，因此位于以下路径下：

SITE/organizations/organization-name

第一个应该是 SITE/organizations/organization-name/overview 第二 SITE/organizations/organization-name/users

等

现在，当我在上面使用第一个时，将始终替换URL中的组织名称。那么我将如何改变呢？

一种解决方案是始终在所有URL中都包含一个斜杠。然后，由于我目前不确定子选项卡将包含什么，即“不是我的事”，因此，一前一后地单击选项卡将导致URL变为：

SITE/organizations/organization-name/overview/events/overview/

那也不好。这两种解决方案都存在一个额外的问题，即无论我是否通过键入内容进入网站，它们的行为都不同

SITE/organizations/organization-name和SITE/organizations/organizations-name/ 这是非常糟糕的，可能会使人们感到困惑。

理想情况下，我将定义 Site/organizations/organization-name成为Site/organizations/organization-name/overview 并使两个URL（以/ organization-name和/ overview结尾）成为彼此的别名。

如何使用react-router为选项卡创建相对路径

0 个答案: