Question

我有以下代码：

const PrivateRoute = ({ component: Component, ...rest }) => {
  return (<Route {...rest} render={(props) => (isAuthenticated() === true ? <Component {...props} /> : <Redirect to='/login' /> )} />)
}

但是我不明白它是如何工作的。我这样称呼它：

<PrivateRoute exact path = '/home' component={Home}></PrivateRoute>

它有效，我只是不明白。道具在哪里传递？什么是组件：组件。

如果有人可以解释此组件的工作原理，我将不胜感激。

Answer 1

component: Component是object destructuring

您可以通过以下方式重新编写它：

const PrivateRoute = (props) => {
  const Component = props.component;
  //shallow copy props, can also do {...props}
  const rest = Object.assign({},props);
  //delete component property from rest
  //  this will not affect props becaus of the shallow copy

react-router的Route组件将获取一个props.component，并通过传递给Route的所有prop减去props.component来呈现该组件。

您创建了一个PrivateRoute，它执行相同的操作，但不是直接渲染通过props传递的组件，而是将渲染Route并将渲染道具传递给它，它是动态()=>jsx创建的组件。 Route将为您呈现此组件。

反应受保护的路线

1 个答案: