fiso
commented
7 years ago So I have a workaround in my app right now which I'll outline here, but it would be preferrable if this worked out of the box with HashRouter.
App root:
ReactDOM.render(
<HashRouter>
<App />
</HashRouter>
,
document.getElementById('root')
);App component render method:
render () {
// This (tampering with the location object) is a potentially troublesome
// hack. The purpose is to allow route transitions to work within
// HashRouter. HashRouter is overall much easier to get to play nice with
// Cordova, so we prefer to use it over BrowserRouter. To revert to
// BrowserRouter with no transitions, replace <AnimatedSwitch> with
// a <Switch> below, and replace HashRouter with BrowserRouter in index.js
const newLocation = Object.assign({}, location);
newLocation.pathname = newLocation.hash.replace('#', '');
newLocation.hash = '';
return (
<main>
<AnimatedSwitch
location={{...newLocation, key: ''}}
atEnter={bounceTransition.atEnter}
atLeave={bounceTransition.atLeave}
atActive={bounceTransition.atActive}
mapStyles={bounceTransition.mapStyles}
runOnMount
className="switch-wrapper">
<PrivateRoute path='/dashboard' component={Dashboard}
authed={this.isAuthenticated()} />
<Route path='/register' component={RegistrationView} />
<Route path='/login' component={LoginView} />
<Route path='/' component={LoginView} />
</AnimatedSwitch>
</main>
);
}
}
maisano
I need to use router transitions in a project that's a Cordova app. For various reasons, HashRouter works much better than BrowserRouter within the context of Cordova.
However, react-router-transition doesn't appear to work when your app is contained in a HashRouter. Is this a simple fix?
Let me know if this description is not fleshed out enough and I'll provide a code sample to demonstrate how to repro. I'm kind of assuming that you'll know what I'm talking about right away here :)