All geek questions in one place

What is wrong with my regular router authentication route?

Unfortunately, I cannot create my own route with the reaction router version 4 . I am trying to build a route that displays the component if the user is authenticated or redirects the user to the login component in another case.

I started using this documentation page to get started.

const ProtectedRoute = ({component, ...rest}) => ( <Route {...rest} render={props => false ? <Component {...props} /> : <Redirect to={{pathname: '/login', state: {from: props.location}}}/>} /> );

I use this ProtectedRoute as follows:

 <ProtectedRoute exact path='/' component={testComponent}/>

When I run this, I get the following runtime error:

 Uncaught ReferenceError: __rest is not defined at ProtectedRoute (index.tsx:19) at ReactCompositeComponent.js:305 at measureLifeCyclePerf (ReactCompositeComponent.js:75) at ReactCompositeComponentWrapper._constructComponentWithoutOwner (ReactCompositeComponent.js:304) at ReactCompositeComponentWrapper._constructComponent (ReactCompositeComponent.js:279) at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:187) at Object.mountComponent (ReactReconciler.js:45) at ReactDOMComponent.mountChildren (ReactMultiChild.js:236) at ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:703) at ReactDOMComponent.mountComponent (ReactDOMComponent.js:522)

Here is some more info on the stack I'm using:

  • respond 15.6.1
  • response-router-dom 4.2.2
  • typescript 2.5.2

Why is rest not defined? What is wrong with my user route?

Thank you in advance!

Update (minimal example)

Below is a minimal example of the problem here . To run the example, do the following:

+5
source share
2 answers

OK, I know what is going on. In your tsconfig.json you declared this rule "noEmitHelpers": true , which tells the typescript compiler not to include any helper functions like __rest in your output. Therefore, you have a runtime error with __rest is not defined . Changing it to false should solve your problem.

+2
source

I am not a Typescript expert and have not yet dived into TS, but this is definitely a problem with your attempt to use the ...rest statement. I think ts does not like the distribution operator in destroying an object and, therefore, the following structure (although it will work fine in ES6):

 ProtectedRoute = ({component: Component, isAuthenticated, ...rest}) => {

If you rewrite your component with explicit use of path prop, it will return to work.

 const ProtectedRoute = ({component: Component, isAuthenticated, path}) => { return <Route path={path} render={props => isAuthenticated ? <Component {...props} /> : <Redirect to={{pathname: '/login', state: {from: props.location}}} />} /> };

But the fact that your code doesn’t work seems strange to me because he mentioned that starting from version 2.1 Typescript has supported spreading / rest in object destruction: https://www.typescriptlang.org/docs/handbook/release-notes/typescript -2-1.html # object-spread-and-rest

+2
source

Source: https://habr.com/ru/post/1271479/

More articles:


All Articles