React: Cannot read properties of undefined (reading 'pathname') при использовании map. Как решить и почему происходит?

Question

[jeanrus]

Я пытаюсь сделать плавный переход по страницам с помощью react-router и react-spring.
Но код выдаёт вышеописанную ошибку.

function App(props) {
  const {location} = useLocation()
  const trans = useTransition(location, location => location.pathname, {
    from: {opacity: 0, transform: "translate(100%, 0)"},
    enter: {opacity: 1, transform: "translate(0, 0)"},
    leave: {opacity: 0, transform: "translate(-50%, 0)"}
  })
  return (
    <>
      <Bar/>
      {trans.map(({item, props, key}) => (
        <animated.div key={key} style={props}>
          <Routes location={item}>
             //...
          </Routes>
        </animated.div>
      ))}
      <Footer/>
    </>
  );
}

Помогите, пожалуйста.

Answer 1

[Aetae]

Проблема в том, что react-router отдаёт параметры роута только внутри компонента самого роута. Да, это - безумие. Костыли ищи\пиши уже сам.

Comments

[jeanrus]

Так в App.js обернут в Router внутри index.js, или я чего-то не понял. Можешь пояснить, пожалуйста?

[Aetae]

jeanrus, ты видишь слово "безумие"?)
Хук работает только внутри компонента переданного компоненту Route.