Unable to make page transitions using useLocation() in place of __RouterContext from 'react-router-dom'

[lfranckx]

I am trying to create animated page transitions using useTransition(). I am using useLocation() provided from react-router-dom in order to get the pathname from the location object. This error constantly comes up I am assuming because the location object is null until the component is rendered. TypeError: Cannot read properties of undefined (reading 'pathname')

Sorry just to clarify my useLocation() is within the Router. I have defined Router inside of the index.js file where it is rendering the App component

import { useTransition, animated } from 'react-spring';
import { withRouter, Switch, Route, useLocation } from 'react-router-dom';

function App() {
  const location = useLocation();
  const transitions = useTransition(location, (location) => location.pathname, {
    from: { opacity: 0 },
    enter: { opacity: 1 },
    leave: { opacity: 0, },
  });

  return (
    {transitions.map(({ item, props, key }) => (
      <animated.div key={key} style={props}>
        <Switch location={item}>
          <Route path='/' component={Home} exact />
          <Route path='/about' component={About} />
        </Switch>
      </animated.div> ))}
  );
}

export default withRouter(App);

[joshuaellis]

What version of react-spring are you using?

[joshuaellis]

Based on you using the v9 of the library see this code snippet @lfranckx

import { useTransition, animated } from 'react-spring';
import { withRouter, Switch, Route, useLocation } from 'react-router-dom';

function App() {
  const location = useLocation();
  const transitions = useTransition(location, {
    keys: (location) => location.pathname,
    from: { opacity: 0 },
    enter: { opacity: 1 },
    leave: { opacity: 0, },
  });

  return (
    <>
    {transitions((styles, item) => (
      <animated.div style={styles}>
        <Switch location={item}>
          <Route path='/' component={Home} exact />
          <Route path='/about' component={About} />
        </Switch>
      </animated.div> ))}
    </>
  );
}

export default withRouter(App);

[lfranckx]

@joshuaellis It's not able to map transitions.

[joshuaellis]

I've edited it.

[lfranckx]

"react-spring": "^9.4.5"