Geek Answers Handbook

Finding the previous path in the response router?

I am using a jet router. I want to discover the previous page (in the same application) where I came from. I have a router in my context. But I do not see any properties, such as the "previous path" or the history on the router object. How to do it?

+21
source share
5 answers

You can save the previous path in the componentWillReceiveProps lifecycle method. The logic is very close to the example presented in the react-router docs troubleshooting react-router .

 <Route component={App}> {/* ... other routes */} </Route> const App = React.createClass({ getInitialState() { return { prevPath: '' } }, componentWillReceiveProps(nextProps) { if (nextProps.location !== this.props.location) { this.setState({ prevPath: this.props.location }) } } })

And lately access to it from state.

+13
source

You can pass the state using the <Link> component, in this case this is the way:

 <Link to={{pathname: '/nextpath', state: { prevPath: location.pathname }}}>Example Link</Link>

You can then access prevPath from this.props.location.state in the following component

+28
source

If you use react-router-redux , you can create a reducer that intercepts events sent by the reaction-router handler.

 export default function routerLocations(state = [], action) { switch (action.type) { case "@@router/LOCATION_CHANGE": return [...state, action.payload] default: return state; } }
+24
source

If you use the <Redirect /> component, you can add the from property, which will be added to location.state in the component you are redirecting to.

 // in the redirecting component <Redirect to={{ pathname: '/login', state: { from: location } }} /> //in the other component you redirected to ... const { location } = props.location.state; ...
+1
source

For React Router 5 and Redux, you can listen to location changes and save the last path in the store.

Define an action and gear for your state branch, e.g. misc :

 // Partial state const miscState = { prevPath: '', // ...other properties } // Action creator export const updatePrevPathAction = path => ({ type: 'misc/prev-path', payload: path, }) // Partial reducer export const miscReducer = (state = miscState, action) { switch (action.type) { case 'misc/prev-path': if (state.prevPath === action.payload) { state = { ...state, prevPath: action.payload } } break // ...handle other actions } return state }

Then, when creating the store, if you use a custom browser history:

 // Import the history import { browserHistory } from 'your-singleton-loc/browser-history' import { updatePrevPathAction, miscReducer } from './misc-state' // ... // Create the store const store = configureStore(...) // Create a listener for browser history const pathListener = loc => { store.dispatch(updatePrevPathAction(loc.pathname)) } // Register the listener browserHistory.listen(pathLisneter) // Save the current uri pathListener(browserHistory.location) // done return store

If you are not using a custom browser history, you can do the same in the App.jsx file using the router's history property.

This solution is for the entire application and does not require response-router-redux.

0
source

More articles:


All Articles