Server side react router onEnter handling, transition.redirect is not a function
Tag : node.js , By : Ernie Thomason
Date : March 29 2020, 07:55 AM
This might help you There is no transition.redirect function, i need to modify the transition redirectInfo object in the onEnter transition hook using transition.to and then verfiy in the main server handler function. /**
*
* @param next
* @param transition
* @param callback
*/
function requireAuth (next, transition, callback) {
var loginPath = '/account/login/' ;
if (!window.user && !(next.location.pathname === loginPath)){
transition.abort();
transition.to(loginPath, null, {
//data: req.body,
//errors: res.body
})
}
callback()
}
app.get('*', function(req, res, next) {
Router.run(routes(), location, function(e, i, transition) {
// **********************************************
// handling redirection info
if (transition.isCancelled) {
console.log ('transition cancelled');
return res.redirect(302, transition.redirectInfo.pathname);
}
// ********************************************************
var str = React.renderToString(
React.createElement(Router, i));
res.send (str)
}
}
|
React router, how to save transition and redirect upon successful login
Date : March 29 2020, 07:55 AM
hope this fix your issue Use onEnter hook in the route definition ( demo). The Login page should include a reference to router in the props (wrapping it with react-router withRouter HoC). In addition, the location prop should include the needed data to redirect back to the original location: const Login = withRouter(({ router, location }) => (
<div>
<button type="click" onClick={() => {
LoginStore.logIn();
router.replace(location.state); // on login redirect back to the original location, by taking that location's details from the router state
}}>Click to Login</button>
</div>
));
const redirectToLogin = (nextState, replace) => {
if (!LoginStore.isLoggedIn()) {
const { pathname, search, query, state } = nextState.location;
replace({ pathname: '/login', state: { pathname, search, query, state } });
}
};
ReactDOM.render((
<Router>
<Route path="/" component={MainLayout}>
<IndexRoute component={Home} />
<Route path="login" component={Login} />
<Route path="page1" component={Page1} onEnter={ redirectToLogin } />
<Route path="page2" component={Page2} onEnter={ redirectToLogin } />
</Route>
</Router>
), document.getElementById('root'))
|
React addons transition group & react router - JS page transition animating
Date : March 29 2020, 07:55 AM
I hope this helps you . How do you use the JS variant of Transition Group with React Router. I have the code shown below in the top level react router componenent but the componentWillLeave() event doesn't fire in child routes: , Giving the routes an key solved the issue: const ChildRoutes = React.cloneElement(this.props.children, {
key: this.props.location.pathname,
})
|
react-router: Switch Redirect not working in localhost:xxxx. Redirect from baseUrl to some other page
Date : March 29 2020, 07:55 AM
like below fixes the issue It started to function correctly once I wrapped my App.js in withRouter.
|
Page transition using react-router and react-addons-css-transition-group
Date : March 29 2020, 07:55 AM
|