@tinkoff/router 0.1.68 → 0.1.71

package/README.md

@@ -60,8 +60,12 @@ export const myGuard: NavigationGuard = async ({ to }) => {
     return false; // block this transition
   }
 
-  if (to.config.redirect) {
-    return '/login/'; // call a redirect to the specified page
+  if (typeof to.config.redirect === 'string') {
+    return to.config.redirect; // call a redirect to the specified page
+  }
+
+  if (typeof to.config.needAuth && !isAuth()) {
+    return { url: '/login/', code: '302' }; // redirect to page with NavigateOptions
   }
 
   // if nothing is returned, the transition will be performed as usual
@@ -83,7 +87,7 @@ The behaviour of routing depends on the result of executing guards functions and
 - if all of the guards returns `undefined` than navigation will continue executing
 - if any of the guards returns `false` than navigation is getting blocked and next action differs on server and client
 - if any of the guards returns `string` it is considered as url to which redirect should be happen
-- if any of the guards returns `NavigateOptions` interface, `url` property from it is considered as url to which redirect should be happen
+- if any of the guards returns [`NavigateOptions`](#navigateoptions) interface, `url` property from it is considered as url to which redirect should be happen
 
 ### Transitions hooks
 
@@ -172,6 +176,13 @@ router.updateCurrentRoute({ query: { a: '1' } });
 2. `change`
 3. `afterUpdateCurrent`
 
+### NavigateOptions
+
+Object that allows to specify transition options both to [navigate](#navigate) and [updateCurrentRoute](#updatecurrentroute) transitions
+
+- `code` - redirect code that is returned on server in case of redirects
+- `navigateState` - any additional data that is stored with route
+
 ### Working with query
 
 #### query option

package/lib/index.browser.js

@@ -7,8 +7,8 @@ import noop from '@tinkoff/utils/function/noop';
 import each from '@tinkoff/utils/array/each';
 import find from '@tinkoff/utils/array/find';
 import findIndex from '@tinkoff/utils/array/findIndex';
-import React, { createContext, useState, useEffect, useContext, useCallback, isValidElement, cloneElement } from 'react';
-import { useShallowEqual } from '@tinkoff/react-hooks';
+import React, { createContext, useState, useContext, useCallback, isValidElement, cloneElement } from 'react';
+import { useIsomorphicLayoutEffect, useShallowEqual } from '@tinkoff/react-hooks';
 
 const PARAMETER_DELIMITER = ':';
 const WILDCARD_REGEXP = /\*/;
@@ -953,6 +953,15 @@ class Router extends ClientRouter {
         if (this.currentNavigation) {
             return this.delayNavigation(navigation);
         }
+        // ignore previous navigations that were put in delayedNavigation as we have more fresh navigation to execute
+        if (this.delayedNavigation) {
+            logger.info({
+                event: 'delay-navigation-drop',
+                delayedNavigation: this.delayedNavigation,
+                navigation,
+            });
+            this.delayedNavigation = null;
+        }
         return this.flattenDelayedNavigation(navigation);
     }
     delayNavigation(navigation) {
@@ -1100,7 +1109,7 @@ const Provider = ({ router, children, }) => {
         route: router.getCurrentRoute(),
         url: router.getCurrentUrl(),
     });
-    useEffect(() => {
+    useIsomorphicLayoutEffect(() => {
         return router.registerSyncHook('change', ({ to, url }) => {
             setState({ route: to, url });
         });

package/lib/index.es.js

@@ -7,8 +7,8 @@ import noop from '@tinkoff/utils/function/noop';
 import each from '@tinkoff/utils/array/each';
 import find from '@tinkoff/utils/array/find';
 import findIndex from '@tinkoff/utils/array/findIndex';
-import React, { createContext, useState, useEffect, useContext, useCallback, isValidElement, cloneElement } from 'react';
-import { useShallowEqual } from '@tinkoff/react-hooks';
+import React, { createContext, useState, useContext, useCallback, isValidElement, cloneElement } from 'react';
+import { useIsomorphicLayoutEffect, useShallowEqual } from '@tinkoff/react-hooks';
 
 const PARAMETER_DELIMITER = ':';
 const WILDCARD_REGEXP = /\*/;
@@ -1037,7 +1037,7 @@ const Provider = ({ router, children, }) => {
         route: router.getCurrentRoute(),
         url: router.getCurrentUrl(),
     });
-    useEffect(() => {
+    useIsomorphicLayoutEffect(() => {
         return router.registerSyncHook('change', ({ to, url }) => {
             setState({ route: to, url });
         });

package/lib/index.js

@@ -1053,7 +1053,7 @@ const Provider = ({ router, children, }) => {
         route: router.getCurrentRoute(),
         url: router.getCurrentUrl(),
     });
-    React.useEffect(() => {
+    reactHooks.useIsomorphicLayoutEffect(() => {
         return router.registerSyncHook('change', ({ to, url }) => {
             setState({ route: to, url });
         });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tinkoff/router",
-  "version": "0.1.68",
+  "version": "0.1.71",
   "description": "router",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -22,7 +22,7 @@
     "build-for-publish": "true"
   },
   "dependencies": {
-    "@tinkoff/react-hooks": "0.0.23",
+    "@tinkoff/react-hooks": "0.0.24",
     "@tinkoff/url": "0.7.37",
     "@tinkoff/utils": "^2.1.2"
   },