Question

我通过使用react-app-link来处理路由，将代码重构为DRY。我的大多数路线都受到保护，使用MyLocation.toRoute（）时我无法保护自己的路线。

我已成功生成不受保护的路由。但是，当尝试保护路由时，会收到很多隐秘的错误消息。不幸的是，ract-app-link文档在render选项上并不广泛。

//Link object
const wholeNbr = Yup.number().integer().positive()
const MyLocation = new Location('/doc/:id', {id : wholeNbr.required()})

//Unprotected route - Working code:
{ MyLocation.toRoute({ component: MyComponent, invalid: NotFoundPage }, true) }

//Protected route - Not working:
const privateLocation = (isAuthenticated, Component) => (
  isAuthenticated ? 
  (
    <Component />
  ):(
    <Redirect to="/" /> //redirect to login page
  )
)
...
<Router history={history}>
  ...
  <Switch>
  ...
  { CategoryLocation.toRoute({ render: privateLocation(isAuthenticated, MyComponent), invalid: NotFoundPage }, true) }
  ...
  </Switch>
</Router>

我希望组件能够呈现，但是会收到错误“ TypeError：_render不是函数”

Answer 1

我找到了解决方案！我没有将函数传递给渲染道具。该代码应显示为：

{ CategoryLocation.toRoute({ render: () => privateLocation(isAuthenticated, MyComponent), invalid: NotFoundPage }, true) }

如何使用react-app-link toRoute（{render}）创建受保护的路由

1 个答案: