score:0
you should use component's lifecycle method componentdidupdate
to handle route's updating as described in react-router-4 migration guide.
for example:
class appcontainer extends react.component {
render() {
return (
<browserrouter>
<div>
<route path='*' component={rootroute}/>
</div>
</browserrouter>
)
}
}
class rootroute extends react.component {
static proptypes = {
history: proptypes.object, // this prop comes from withrouter feature
location: proptypes.object, // this prop comes from withrouter feature
user: proptypes.object // this prop should come from your app
}
componentdidupdate() {
this.checksession({
location: this.props.location.pathname,
user: this.props.user
})
}
checksession({location, user}) {
if (!user.islogged() && !user.islocationpublic(location)) {
this.props.history.push('/login')
}
}
render() {
return (
<div>
<switch>
<route path='/login' component={loginroute}/>
<route path='/backoffice' component={backofficeroute}/>
</switch>
</div>
)
}
}
export default withrouter(rootroute)
score:0
combining the two answers above, this worked for me:
componentwillunmount() {
const {location} = this.props;
if(location.state && location.state.from) {
this.props.history.push(location.state.from.pathname);
} else {
this.props.history.push('/');
}
}
don't do it in componentdidupdate
- it will be called continuously.
score:4
since you are already passing the location from where you came as a location state to redirect in privateroute, you can use the same while redirecting back from login component
in the login component you would have
onsuccesslogin = () => {
const {location} = this.props;
if(location.state && location.state.from) {
this.props.history.push(location.state.from);
} else {
this.props.history.push('/');
}
}
Source: stackoverflow.com
Related Query
- React - Routing & Redirect after login to attempted page
- Using React Router to Redirect to next page after successful login
- How do i make a react app redirect to the login page after registration?
- react redirect to another page after login
- react-router-Dom: Blank page after redirect multiple user on login in React
- Redirect user to a page after succesful login in React app
- How can I redirect to previous page after login in react router?
- Redirect to home page after React Azure AD login
- redirect to new page after login in react
- How to redirect to another page after login in react
- How to redirect to profile page in React after submitting Login and Signup button?
- react-redux redirect to other page after login
- Redirect to login page in react router 4
- Redirect to Home after Login on React Redux Application
- How to redirect to login page on click of logout in react
- React keycloak integration not redirect to login page
- React Router Still Renders Previous Page after Routing to New Component
- Reactjs redirect to dashboard page after successful login with react-router-dom (v6)
- Redirect user after login with react redux?
- I want to redirect to a particular page after getting response from webservice using withRouter in react
- react router v6 won't switch to Home Page after Login Page: Warning: Can't perform a React state update on an unmounted component
- Warning: Can't perform a React state update on an unmounted component after update context and redirect to another page
- How to redirect to a new page in react and typescript after an animation
- How to create login and redirect to another page after success?
- How to I prevent user from accessing the page of my react app directly by entering the URL, and redirect them back to login page
- How to redirect another page after button on click method react js
- React - redirect to login page when not authenticated
- How could i use the routing in reactjs to redirect from one page after loading to another url
- How do I redirect after login to another page in ReactJs
- redirect to other page after authentication react
More Query from same tag
- One function to close a specified modal?
- Storing Value from JSON response to AsyncStorage React Native
- Handling input change for API call in React.JS
- How to fetch data from restAPI and from localStorage at a time?
- Unable to render second react component
- ReactJS : Form Data Capture : values not setting properly
- Reactjs server side templates
- Let users create elements that only they can see in Firebase (in React)
- PUT request from React to mongodb with Axios
- Show images <img src='path' /> in React, has some issues
- Next.js dynamic import with server-side-rendering turned off not working on production build
- Make tables render as one next & materialui
- React Hook useEffect received a function whose dependencies are unknown
- How do you remove a class from elements inside a component in React.JS when clicking outside given component?
- Best practice interface for custom hooks with function arguments
- React Testing Library / Redux - How to mock cookies?
- this.setState isn't merging states as I would expect
- Can I create a React Element from an HTML string or dom node/element
- concise and readable syntax for props in a react component in typescript
- Error: Pagination(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null
- How can I get the state from `componentDidMount `(using Redux)?
- Using Material UI is causing invalid hook call warning
- Axios/Backend in React stops working after a while with no error
- React component autobinding
- UnhandledPromiseRejection when trying to write to file using API in node
- Fetching data from Firebase with react
- Multiselect in react bootstrap dropdown
- How can I make my function receive an array of objects and then use it?
- Error TS7053 when accessing any index of the target of a React.FormEvent<HTMLFormElement>
- React Application Unit Testing