反应保护路由

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>

它有效，我只是不明白。 props 是从哪里传入的？ 什么是组件：组件。

如果有人能解释这个组件是如何工作的，我将不胜感激。

Answer 1

component: Component是对象解构

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

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 的所有 props 减去 props.component。

您创建一个PrivateRoute来执行相同的操作，但不是直接渲染在 props 中传递的组件，它会渲染 Route 并将渲染 prop 传递给它，这是一个动态创建的组件()=>jsx 。 Route 会为你渲染这个组件。