1

I try to use typescript to rewrite the example of 'Redirects (Auth)', but meet one problem that the function cannot receive the props as I expect.

Here is my code:

router setting and function of private router:

export default () => (
<Router>
    <Switch>
      <PrivateRoute exact path="/welcome" component={Welcome}/>
      <Route component={NoMatch}/>
    </Switch>
</Router>)

const PrivateRoute = (component: any, ...rest: Array<any>) => {
  console.log(component, rest)
  return (
  <Route {...rest} render={props => (
    isAuthenticated() ? (
      <div>
          <Header/>
          <Sider/>
          <div className="content slide-in">
            <component {...props}/>
          </div>
      </div>
    ) : (
      <Redirect to={{
        pathname: '/',
        state: { from: props.location }
      }}/>
    )
  )}/>
)}

I expect that the param of component is the Component of 'welcome', and the param of rest are other params such as 'exact' and 'path', but actually get the params as in above image.

component: enter image description here

rest: enter image description here

Anyone can help me to solve this problem? Many thanks!

Nlp2ct.anson
  • 33
  • 1
  • 7

0 Answers0