I am trying to implement a way where whenever I change a page, it scrolls to the top. So far, I have tried adding this:
useEffect(() => {
window.scrollTo(0, 0);
}, []);
But this does not help. Is there anyway to make it so whenever a new link is opened through react-router, the app automatically goes to the top? I am using component based functions and would prefer a solution that uses hooks.
Related
working on single page appliction trying use popstate to navigate back to previous page but I have to click twice to take me back. I want to make it happen for one click. console showing for each click but needs twice click to navigate back. using react native.
also using props.navigator.push for single page application
useEffect(() => {
window.addEventListener('popstate', (event) => { console.log( event) });
}, []);
I have a use case where I need to navigate from one salesforce tab to other. I want the tab to which I navigate to reload as I want it to render and per new data which I will be setting in the previous tab.
I have tried using following code but it does not seem to reload the page. It just navigates to the tab.
this[NavigationMixin.Navigate]({
type: 'standard__navItemPage',
attributes: {
apiName: 'tab_api_name'
},
});
If not complete reload, is there any method which we can invoke on switching/navigating between salesforce tabs as it did not call any of the lifecycle methods while switching tabs.
You can try window.open(url, "_self");
I am creating a react/Gatsby website and am trying to get the navigation working an need some guidance
So basically I have a site on a domain like: https//mysite.com
When navigating in the site my route gets added to the domain, like so: https//mysite.com/page1,
https//mysite.com/page2 etc.
When I refresh the browser I want the site to reload the website to its origional state, ie, https//mysite.com.
When I do reload from /page2, for example, the site seems to remember the last position. So on a reload I still have https//mysite.com/page2 in the address bar, whereas I want the site to go to the home page.
Is this possible?
Thanks
See this question for how to detect a page reload (such as pressing F5). The second most upvoted answer recommends this code for detecting the refresh and triggering another function:
componentDidMount() {
window.onbeforeunload = function() {
this.onUnload();
return "";
}.bind(this);
}
Gatsby uses #reach/router under the hood. So use Gatsby Link to redirect to your root page:
import { navigate } from "gatsby"
componentDidMount() {
window.onbeforeunload = function() {
this.onUnload();
return "";
}.bind(this);
navigate("/"); // redirect to your root page here
}
The user will be able to go back to the previous page. If you don't want this you replace the history like this:
navigate("/", { replace: true });
I faced with interesting problem in React JS. I'm opening main page of my application with the list of products. Then I chose few products and open them in separate tabs (browser windows). When I'm starting to work with each tab my localStorage changes (product is added to cart) but only on the current page which I'm working on. Is there any possible ways to update (synchronize) localStorage for all opened tabs (browser windows) in React JS (Redux), not only on current page?
You want to add an event listener using window.addEventListener('storage', function() {}) and update your application state either using setState or dispatching an action with redux
componentDidMount() {
window.addEventListener('storage', this.handleStorageChange);
}
componentWillUnmount() {
window.removeEventListener('storage', this.handleStorageChange)
}
handleStorageChange(storageEvt) {
// setState or dispatch a redux action
this.setState({
});
}
This sounds ridiculously simple but I am not be able to find any solution for this from Google.
On my page, I have a button to close the page itself
<Button onClick={() => window.close()} >Close</Button>
But everytime triggering the button, i got the warning
Scripts may close only the windows that were opened by it.
I am using react-native for my mobile app, it connects to keycloak to (through WebView of RN) open Facebook authentication page and then, after that, keycloak redirects to success page (localhost/login/success which has the button to close the page itself. The page is under next.js). Even i access localhost/login/success directly on browser, I cannot close page neither
Update I managed to work around by using onNavigationStateChange and check if the navState.url contains the success/login or not to trigger the state and close the WebView. But i am still curious about how to close the window in React ?
You can use onMessage prop to communicate between WebView and React-Native.
A function that is invoked when the webview calls
window.postMessage. Setting this property will inject a
postMessage global into your webview, but will still call
pre-existing values of postMessage.
Example
_onMessage = (message) => {
console.log(message);
}
render() {
return (<WebView ref={(ref) => { this.webView = ref; }} onMessage={this._onMessage} ..otherProps />);
}
// In your webview inject this code
<script>
window.postMessage("Sending data from WebView");
</script>