2016-03-06 62 views
0

在我的应用程序中,我希望应用程序的某些部分无法深层链接到。例如,我们的用户有一份调查列表,我想如果有人试图直接直接进行特定调查,例如/survey/1,那么路由器会对此进行回应,并立即将其重定向回/survey,他们将不得不选择一个他们想要的。我试图写onEnter钩子,但它们看起来很麻烦,因为我能够让它们正确行为的唯一方法是存储一些全局状态,说明它们已经到了主页面并且每次都检查路线被导航到。防止反应路由器中的深层链接

林在我的应用程序中使用pushState的,如果说有什么区别和反应路由器2.0

我想尽量避免写服务器重写规则这个因为在我的应用程序有很多的领域该规则适用的地方。

回答

0

我有一个建议是类似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功能得到改善,但这只是为了证明这一点。另外,我会在反应路由器中使用browserHistory,但由于某种原因,我无法使用codepen运行它。

希望这会有所帮助。