javascript - hashRouter React breaking AnimatePresence(Framer-Motion) exit animations

Question

I'm creating a react app that has multiple tabs reached via routes with exit and entrance animations created with Framer motion. On live launch of the build I found out about the standard Refresh problem when refreshing out of the index page giving 404. I am trying all the simpler fixes such as HashRouter as SEO and pretty URLs are not of any concerns and they work fine to fix the refresh issues, but my exit animations get disabled. I tried putting hashBrowser in both the app and index components and also both inside or outside of the AnimatePresence, however, nothing seems to work. I would be really grateful if someone who has experience dealing with the issues shares their expertise. It's a very niche problem so I did not have any luck googling it. The code provided is my regular code without the solutions I have implemented so far and obviously did not work.

Index.js component:

ReactDOM.render(
  <React.StrictMode>
    <Router>
      <App />
    </Router>
  </React.StrictMode>,
  document.getElementById('root')
);

App component:

function App() {
  const location = useLocation();

  return (
    <div className='App'>
      <Layout />
      <AnimatePresence>
        <Switch location={location} key={location.key}>
          <Route exact path='/' component={Home} />
          <Route path='/about' component={About} />
          <Route path='/skills' component={Skills} />
          <Route path='/projects' component={Projects} />
          <Route path='/contact' component={Contact} />
          <Route path='/casestudy' component={Casestudy} />
        </Switch>
      </AnimatePresence>
    </div>
  );
}

export default App;

and just in case i'm adding the navigation components to see how I usually link to those routes:

const navigationItems = (props) => (
  <ul className={classes.NavigationItems}>
    <NavigationItem clicked={props.clicked} link='/'>
      HOME
    </NavigationItem>
    <NavigationItem clicked={props.clicked} link='/about'>
      ABOUT
    </NavigationItem>
    <NavigationItem clicked={props.clicked} link='/skills'>
      SKILLS
    </NavigationItem>
    <NavigationItem clicked={props.clicked} link='/projects'>
      PROJECTS
    </NavigationItem>
    <NavigationItem clicked={props.clicked} link='/contact'>
      CONTACT
    </NavigationItem>
  </ul>
);

const navigationItem = (props) => (
  <Link to={props.link} className={classes.NavigationItem}>
    <p tabIndex='0' onClick={props.clicked} className={props.active ? classes.active : null}>
      {props.children}
    </p>
  </Link>
);

question from:https://stackoverflow.com/questions/65905140/hashrouter-react-breaking-animatepresenceframer-motion-exit-animations

Answer 1

Waitting for answers