防止react-router

Question

在我的应用程序中，我希望应用程序的某些部分无法与之深层链接。例如，我们的用户有一个调查列表，如果有人试图直接进入某个特定的调查，例如/survey/1，那么路由器会对此进行检测并立即将其重定向回{/survey。 1}}他们必须选择他们想要的那个。我曾尝试编写onEnter个钩子，但它们似乎非常麻烦，因为我能够让它们正常运行的唯一方法就是存储一些全局状态，表明它们已经去过主页面，并在每次导航到路径时检查。

我在我的应用程序中使用pushstate，如果这有任何区别并且react-router 2.0

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

Answer 1

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

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

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

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

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

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

希望这有帮助。