防止反应路由器中的深层链接

Question

在我的应用程序中，我希望应用程序的某些部分无法进行深度链接。 例如，我们的用户有一份调查列表，我想如果有人尝试直接直接进入特定调查（例如/survey/1 ，反应路由器会对此进行选择，并立即将其重定向回/survey ，他们会必须选择他们想要的那个。 我尝试编写onEnter挂钩，但是它们似乎非常麻烦，因为我能够使它们正确运行的唯一方法是存储一些全局状态，该状态表示它们已访问主页并每次检查路线导航到。

我在我的应用程序中使用pushstate如果有什么不同和react-router 2.0

我想尝试避免为此编写服务器重写规则，因为在我的应用程序中有很多适用此规则的区域。

Answer 1

我有一个类似于onEnter钩的建议：

• 用一个检验是否允许深度链接的函数包装Survey survey/:id路线的组件，让我们将此函数称为preventDeepLinking
• preventDeepLinking函数检查位置状态是否包含某个标志，例如allowDeep 。 从应用的另一个页面导航时，将在位置状态中设置此标志。 显然，当用户尝试直接导航到调查页面时，将不会设置此标志。
• preventDeepLinking函数仅在允许深度链接的情况下才会呈现包装的组件，否则将重定向到更高的路由。

我在codepen.io上创建了一个示例。 您可以在Pen的调试视图中使用它： http : //s.codepen.io/alexchiri/debug/GZoRze 。

在调试视图中，单击“用户”链接，然后单击列表中的特定用户。 其名称将显示在下面。 请注意，其ID是网址的一部分。 删除包含?_的哈希，然后按Enter。 您将被重定向到/users 。

笔的代码在这里： http : //codepen.io/alexchiri/pen/GZoRze

preventDeepLinking函数可以改进，但这只是为了证明这一点。 另外，我会在react-router中使用browserHistory ，但是由于某种原因我无法使其在Codepen中运行。

希望这可以帮助。