Comments (11)
I just found myself needing this same functionality and I came up with the solution below. However I'm wondering if there are edge cases to relying on this.props.location.action
?
if (this.props.location.action === 'PUSH') {
this.props.history.goBack();
} else {
this.props.history.pushState(null, '/videos');
}
from history.
Well, I've found that history.length
in the app context is impossible because of the scenario where the user leaves the app: although we do get the unload event, we can't tell if any of our entries are removed (e.g. clicking external link) or still there (e.g. jumping back to a different website). For example, if the user browses from /a
to /b
to /c
, goes back to /b
and then leaves the app somehow, we can't possibly know if /c
is still in the browser history or not.
history.current
or location.current
isn't affected by this though, but it wouldn't be perfectly reliable either (just like resetting pop transitions).
However, in your case it seems like you don't need that at all. Wouldn't it be enough to use location.state
?
// navigate from list to details
history.pushState({ fromList: true }, path);
// back button
if (location.state.fromList) {
history.goBack();
} else {
history.pushState(...);
}
from history.
Not the best solution, but this might help others
const browserHistory = createBrowserHistory();
let previous = 0;
const _push = browserHistory.push;
const _goBack = browserHistory.goBack;
browserHistory.push = (path, state) => {
previous += 1;
_push(path, state);
};
browserHistory.goBack = () => {
if (previous > 0) {
previous -= 1;
_goBack();
} else {
browserHistory.push('/');
}
};
from history.
For anyone who was in my situation who was pointed here while using react-router-redux and react-router and had the same issue as OP. I think the main thing here is to forget about goBack and to pass information through the location state that can uniquely identify the route that triggered your route.
const {browserHistory} = require('react-router');
browserHistory.push({
pathname: listItemPath,
state: {fromList: true},
})
//In the component linked to by listItemPath
const mapStateToProps = ({routing}) => {
return {
fromList: routing.locationBeforeTransitions.state ?
routing.locationBeforeTransitions.state.fromList
: undefined,
};
};
from history.
Is it possible to have a history stack that is only the history within the context of the app that is using history?
I would love to be able to provide history.length
as part of our public API, but we have discussed this at length before, and I believe we came to the conclusion that it's not possible in browsers. Still, I'd love it if we could find a way.
from history.
@chrisdrackett thoughts?
from history.
it would seem to me that in the above case, if the user navigates from /b
to an external page that /c
should no longer be in the history anyways. I guess my use case can be checked by somehow looking if the previous value in history is part of the local site or an external site, so something similar to what @taurose suggested is probably worth looking into.
from history.
if the user navigates from /b to an external page that /c should no longer be in the history anyways.
It will remain in browser history when using back or forward buttons to navigate to another page. If we were to provide history.length
and the user came back to /b
(again, using back/forward), a canGoForward
based on history.length
would misbehave.
Anyway, I don't think history.length
is what you want, since it would stay the same when pressing the back button. It sounds like it should either be something like location.current > 0
(canGoBack
) to figure out if there's something in your app to go back to, or location.state
as I suggested (drawback being that it only works when using links, e.g. not when manually entering URL).
from history.
Is there anything to do here @chrisdrackett? If not, I'd like to close. Please be the steward of your own ticket :) Thanks!
from history.
I think there is a mismatch between how I'm thinking about history (I only care about the window where the user is on my app and not any history before or after that). Regardless, sounds like I can get this functionality with a little work on my end, so I'll close this.
from history.
@nickw 's solution does not work of you go back 2 times in a row. I ended up using this (react-router uses this history library):
import {hashHistory} from 'react-router'
const previous = []
export const go = (path) => {
previous.push(path)
hashHistory.push(path)
}
export const goBack = () => {
if (previous.length){
hashHistory.goBack()
previous.pop()
} else {
hashHistory.push('/')
}
}
This way I prevent the back button from navigating outside of my own webpage and showing the homepage instead.
from history.
Related Issues (20)
- Named exports donβt work with Node.js ESM support HOT 1
- Sourcemaps are blank HOT 1
- Use History in redux actions HOT 2
- Location type should have template for unknown for state HOT 3
- doing history.go() does NOT trigger a blocker callback handler HOT 1
- Did TS declaration file disappear for v4? HOT 4
- Wrong action after clicking on Forward button in browser HOT 3
- Need history.BackTo(string)
- Is it possible to access the history bundled into React Router? HOT 1
- globalHistory.pushState function excuted failed in baidu.app
- [v6] Missing hashType={"noslash"} of HashRouter HOT 3
- [react-router-dom v6] HashRouter support HOT 1
- Add index property to BrowserHistory, HashHistory and corresponding Update
- Why `history.length` is gone? HOT 7
- createBrowserHistory() breaks history URL on iOS 11
- history
- is this project abandoned? HOT 2
- Navigate replace without generate new location.key
- hash history url is not parsed correctly with query params
- ReferenceError: document is not defined in Next.JS HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from history.