J
J
jeanrus2021-11-21 18:16:08
JavaScript
jeanrus, 2021-11-21 18:16:08

React: Cannot read properties of undefined (reading 'pathname') when using map. How to solve and why is it happening?

I'm trying to make smooth page transitions with react-router and react-spring.
But the code gives the above error.

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/>
    </>
  );
}

Help me please.

Answer the question

In order to leave comments, you need to log in

1 answer(s)
A
Aetae, 2021-11-21
@Aetae

The problem is that react-router gives route parameters only inside the route component itself. Yes, this is insane. Look for crutches \ write yourself.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question