我的自定义身份验证React-Router路线有什么问题

Question

不幸的是，我无法使用React-Router版本4创建自定义路由。在另一种情况下登录组件。

我一直在使用此文档页面开始。

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

我正在使用此 ProtectedRoute：

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

当我运行此功能时，我会收到以下运行时错误：

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)

在这里，有关我正在使用的堆栈的更多信息：

• React 15.6.1
• React-Router-Dom 4.2.2
• 打字稿2.5.2

为什么未定义rest？我的自定义路线怎么了？

预先感谢您！

更新（最小示例）

可以在此处找到该问题的最小示例。要运行示例，请按照以下步骤：

• 使用yarn install
安装依赖项
• 使用yarn dev
运行开发服务器
• 转到http：//localhost：8080

Answer 1

好吧，我知道发生了什么。在您的tsconfig.json中，您声明了此规则"noEmitHelpers": true，该规则告诉Typescript编译器在输出中不包含任何助手功能，例如__rest。这就是为什么__rest is not defined有运行时错误的原因。将其更改为false应该解决您的问题。

Answer 2

我不是打字稿专家，尚未潜入TS，但这绝对是与您尝试使用...rest操作员的尝试有关的问题。我猜TS不喜欢在对象破坏的物体中，因此不喜欢以下结构（尽管在ES6中可以正常工作）：

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

如果您使用path的明确使用来重写组件，则可以恢复正常工作。

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

但是，您的代码对我来说似乎不起作用的事实，因为它提到的是2.1版本toxpycript从2.1版本开始支持/休息在对象破坏中：https：//www.typescriptlang.org/docs/docs/handbook/handbook/rhandbook/release-notes/typecript-2-1.html＃object-spread-and-rest