React Router соответствует нулевому свойству при использовании пользовательского компонента Route

Я использую компонент ConnectedRouter и собственный маршрут следующим образом:

const PrivateRoute = ({ layout: Layout, component: Component, rest }) => (

  <Route
    {...rest}
    render = {matchProps => (
      <AuthConsumer>
        {({ authenticated }) =>
          authenticated ? (
            <Layout pathname = {matchProps.location.pathname}>
              <Component {...matchProps} />
            </Layout>
          ) : (
            <Redirect to = {{ pathname: '/login', state: { from: matchProps.location } }} />
          )
        }
      </AuthConsumer>
    )}
  />
)

который я использую следующим образом:

<Switch>
    <PrivateRoute
      exact
      path = {`${match.url}someroute/:id`}
      layout = {Layout}
      component = {SomePage}
    />
</Switch>

И такой компонент:

import React from 'react'

const SomePage = ({ match }) => {
  console.info('MATCH ', match.params)
  return <div>TESTING</div>
}

export default SomePage

В этом случае match пуст, и он думает, что находится на маршруте '/' (хотя location prop говорит, что он на /someroute/123.

С другой стороны, это работает:

<Route
      exact
      path = {`${match.url}someroute/:id`}
      component = {SomePage}
    />

и матч обновляется правильно.

Я в тупике, почему это происходит. Любая помощь будет оценена по достоинству!

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
1 030
1

Ответы 1

А, я разбираюсь. rest должен был быть ...rest, компонент <Route> неправильно передавал реквизит!

Другие вопросы по теме