Что не так с моим пользовательским маршрутом аутентификации react-router?

К сожалению, мне не удалось создать пользовательский маршрут с помощью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)

Вот еще немного информации о стек, который я использую:

  • реагировать 15.6.1
  • react-router-dom 4.2.2
  • машинопись 2.5.2

Почему rest не определено? Что не так с моим собственным маршрутом?

Заранее благодарю вас!

Обновление (минимальный пример)

Минимальный пример задачи можно найтиздесь . Чтобы запустить пример, выполните следующие действия:

  • установить зависимости с помощью yarn install
  • запустите dev-сервер с помощью yarn dev
  • перейти к http://localhost:8080
2 5
reactjs react-router typescript react-router-v4

2 ответа:

Ладно, я знаю, что происходит. В вашем tsconfig.json вы объявили это правило "noEmitHelpers": true, которое говорит компилятору typescript не включать в выходные данные никакие функции помощников, такие как __rest. Вот почему у вас есть ошибка времени выполнения с __rest is not defined. Изменение его на false должно решить вашу проблему.

2

Я не специалист по машинописи и еще не погружался в TS, но это определенно проблема, связанная с вашей попыткой использовать оператор ...rest. Я предполагаю, что ts не любит оператор spread в деструктурировании объекта и, следовательно, следующую структуру (хотя она будет отлично работать в ES6): 

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

Если вы перепишете свой компонент с явным использованием path prop, он снова будет хорошо работать.

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 typescript поддерживает spread/rest в рамках деструктурирования объектов: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-1.html#object-spread-and-rest

2