Question

很遗憾，我无法使用react-router version 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)

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

反应15.6.1
react-router-dom 4.2.2
typescript 2.5.2

为什么没有定义rest？我的自定义路线出了什么问题？

提前谢谢！

更新（最小示例）

可以找到问题的最小示例here。要运行该示例，请执行以下步骤：

使用yarn install
使用yarn dev
转到http://localhost:8080

Answer 1

我还不是打字稿专家，也没有潜入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版本打字稿开始支持对象解构中的传播/休息：https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-1.html#object-spread-and-rest

Answer 2

好的，我知道发生了什么事。在tsconfig.json中，您声明了此规则"noEmitHelpers": true，它告诉typescript编译器在输出中不包含任何帮助函数，如__rest。这就是为什么你有__rest is not defined的运行时错误。将其更改为false可以解决您的问题。

我的自定义身份验证react-router路由有什么问题？

更新（最小示例）

2 个答案: