在反应路由器中防止深度 link
Prevent deep link in react-router
在我的应用程序中，我希望应用程序的某些部分无法深度链接。例如，我们的用户有一个调查列表，我希望如果有人试图直接进入某个特定的调查，例如 /survey/1，那么 React 路由器会注意到这一点并立即将他们重定向回 /survey 他们将不得不 select 他们想要的那个。我尝试编写 onEnter 钩子，但它们似乎非常麻烦，因为我能够让它们正确运行的唯一方法是存储一些全局状态，表明它们已经访问过主页，并且每次路线导航到时检查。
我在我的应用程序中使用 pushstate，如果这有什么不同的话，react-router 2.0
我想尽量避免为此编写服务器重写规则，因为我的应用程序中有很多区域适用此规则。
我有一个类似于 onEnter 钩子的建议：
- 用一个函数包装
survey/:id 路由的组件，该函数验证是否允许深度 linking，我们称这个函数为 preventDeepLinking
-
preventDeepLinking 函数检查位置状态是否包含某个标志，比方说 allowDeep。当从应用程序的另一个页面导航时，此标志将在位置状态中设置。显然，当用户尝试直接导航到调查页面时，不会设置此标志。
- 只有在允许深度 linking 的情况下，
preventDeepLinking 函数才会渲染包裹的组件，否则将重定向到更高的路由。
我在 codepen.io 上创建了一个样本。您可以在 Pen 的调试视图中使用它：http://s.codepen.io/alexchiri/debug/GZoRze.
在调试视图中，单击用户 link，然后单击列表中的特定用户。它的名称将显示在下方。请注意，它的 id 是 url 的一部分。删除包括 ?_ 的散列，然后按 Enter。您将被重定向到 /users.
笔的代码在这里：http://codepen.io/alexchiri/pen/GZoRze
preventDeepLinking功能可以改进，但这只是为了证明一点。另外，我会在 react-router 中使用 browserHistory 但由于某种原因我无法在 codepen 中得到它 运行。
希望对您有所帮助。
在我的应用程序中，我希望应用程序的某些部分无法深度链接。例如，我们的用户有一个调查列表，我希望如果有人试图直接进入某个特定的调查，例如 /survey/1，那么 React 路由器会注意到这一点并立即将他们重定向回 /survey 他们将不得不 select 他们想要的那个。我尝试编写 onEnter 钩子，但它们似乎非常麻烦，因为我能够让它们正确运行的唯一方法是存储一些全局状态，表明它们已经访问过主页，并且每次路线导航到时检查。
我在我的应用程序中使用 pushstate，如果这有什么不同的话，react-router 2.0
我想尽量避免为此编写服务器重写规则，因为我的应用程序中有很多区域适用此规则。
我有一个类似于 onEnter 钩子的建议：
- 用一个函数包装
survey/:id路由的组件，该函数验证是否允许深度 linking，我们称这个函数为preventDeepLinking -
preventDeepLinking函数检查位置状态是否包含某个标志，比方说allowDeep。当从应用程序的另一个页面导航时，此标志将在位置状态中设置。显然，当用户尝试直接导航到调查页面时，不会设置此标志。 - 只有在允许深度 linking 的情况下，
preventDeepLinking函数才会渲染包裹的组件，否则将重定向到更高的路由。
我在 codepen.io 上创建了一个样本。您可以在 Pen 的调试视图中使用它：http://s.codepen.io/alexchiri/debug/GZoRze.
在调试视图中，单击用户 link，然后单击列表中的特定用户。它的名称将显示在下方。请注意，它的 id 是 url 的一部分。删除包括 ?_ 的散列，然后按 Enter。您将被重定向到 /users.
笔的代码在这里：http://codepen.io/alexchiri/pen/GZoRze
preventDeepLinking功能可以改进，但这只是为了证明一点。另外，我会在 react-router 中使用 browserHistory 但由于某种原因我无法在 codepen 中得到它 运行。
希望对您有所帮助。