I do some functions when user load a component and create data I create function clear and delete what I did but need load this function when user refresh or change a route or close the page I'm used HashLocationStrategy on routes !
Related
I have 2 components on separate pages in nextjs. The way I would like my app to work is:
User inputs some data on page A and clicks submit
A request to my backend is sent and it returns a 'accessToken', at the same time the user is redirected to page B
To load page B the 'accessToken' is sent to an external service to initialize the component provided by that service
If the user leaves the page and returns, the 'accessToken' should be still set and they should not need to re-do step 1,2 but if they request a new one then that should also be updated in page B
Below the component provided by the external service for reference:
<WebSdk
accessToken={token}
expirationHandler={handler}
config={config}
options={options}
onMessage={messageHandler}
onError={errorHandler}
/>
How should I store and read the access token? Do I need to use useState or useEffect? Do I need to set a cookie or localStorage?
Neither useState nor useEffect is good choice for this condition.
You can use both cookies(low security) and localStorage , but I recommend using sessionStorage(it has expire time) .I
I have one odd requirement in one of my project, the requirement is -
1) On initial load of my web-app it should load initial page (first page).
2) If the user comes next time then he should be directly redirected to where he left previously - I'm getting the DROP STAGE from API.
3) When user comes next time then he is redirected to the previously dropped page, but on pressing back he could be redirected to the previous page of the page where he left
Now what I have done so far is -
I have used react-router-dom for routing, but the thing which happens to me is -
1) User comes first time and he is redirected to the very first page by checking the DROP stage from API
2) When user comes again, he has a DROP STAGE (from API) so I am redirecting him to the DROPPED Page.
3) When user press back button (mobile device), the user doesn't stays to the page instead he is redirected again to the DROPPED PAGE as I am checking the DROP STAGE on componentWillMount event and he is again redirected.
Workaround which I have tried are -
1) To set a localstorage variable on the dropped page and check that variable on the back button pressed page - BUT THE RESULT IS I GET THE LOCALSTORAGE VALUE AS EMPTY
2) To check the Action of page i.e. when the user press back button the action becomes POP, but the problem is when the user comes for the first time then too the action is POP - HOW CAN I GET THE ACTION AS PUSH ON INITIAL LOAD
How can I achieve my functionality. Please help
What you need is a module which will be called only once when the application is loaded but it should be loaded irrespective of which ever page the user accesses first.
What you can do is add an empty component in your main router file which should be the first to be called and is called in all the routes. And in the componentDidMount of the component, you should handle the redirection no where else. So the redirection will happen only once thus handling the back actions automatically.
I am using admin-on-rest in my React app and wonder how is possible to make a custom page containing Show (or another detail component) with specified resource Id (for example: I want my app to fetch only resource with id = 1)
I don't know if this is canonical or the intended way to do things but you can supply both basePath and record as props to the ShowButton and EditButton components.
You can use this to redirect your user basically anywhere.
It should be possible (using some switch case or dependent input addon) to also add these props to the ListButton in the Show and Edit view and redirect your user back to the originating ListView.
Here is documentation to supply actions to the List view.
https://marmelab.com/admin-on-rest/List.html#actions
I am using MVC.
I have a layout page that has some components that call the controllers. One of this component is the menù that call the action GetMenu(...).
And then I have the page that use that layout page. I reach this page calling an action (Index) of another controller.
So.. Everytime I call at least two actions:
/HomeController/GetMenu
/ServiceXXXController/Index
Now, from the action GetMenu, I need to take the url of the page I am visiting. In MVC, it means that I need to take the url of the other action (/ServiceXXXController/Index) but when I do Request.Url.* I obtain the url of the menu (/HomeController/GetMenu)
There is a way to obtain the url of that page I am visiting?
Thank you.
You can pass the URL to get menu while rendering it.
In my application I'd like to have certain portions of the app not be able to deep linked to. For example our users have a list of surveys and I'd like if someone tried to go directly to a particular survey directly such as /survey/1 that react router would pick up on this and immediately redirect them back to /survey and they would have to select the one they want. I've tried to write onEnter hooks but they seem to be very cumbersome since the only way I've been able to get them to behave correctly is to store some global state that says they have been to the main page and inspect that every time the route is navigated to.
Im using pushstate in my application if that makes any difference and react-router 2.0
I'd like to try to avoid having to write server rewrite rules for this since there are a lot of areas in my application where this rule is applicable.
I have a suggestion which is similar to the onEnter hook:
Wrap the component of the survey/:id route with a function which verifies if deep linking is allowed or not, let's call this function preventDeepLinking
The preventDeepLinking function checks if the location state contains a certain flag, let's say allowDeep. This flag would be set in the location state when navigating from another page of your app. Obviously, this flag will not be set when the user tries to navigate directly to the page of a survey.
The preventDeepLinking function will render the wrapped component only if deep linking is allowed, otherwise will redirect to a higher route.
I created a sample on codepen.io. You can play with it in the debug view of the Pen: http://s.codepen.io/alexchiri/debug/GZoRze.
In the debug view, click the Users link and then on a specific user from the list. Its name will be displayed below. Notice that its id is part of the url. Remove the hash including the ?_ and hit Enter. You will be redirected to /users.
The code of the Pen is here: http://codepen.io/alexchiri/pen/GZoRze
The preventDeepLinking function can be improved, but this is just to prove a point. Also, I would use the browserHistory in react-router but for some reason I couldn't get it running in codepen.
Hope this helps.