I am currently using UniversalRouter for routing in a react application that contains a form and other UI elements to allow users with admin permissions to make changes to data within the app for other users to see. I would like to be able to detect when a user is about to leave the page so that I can display a warning and give the user a choice to save their changes or abandon them.
I have seen other results that seem to address this problem for React-Router, but I have yet to find any results for achieving this using UniversalRouter.
In looking back at one of the blog posts where I discovered UniversalRouter, it seems like this would be something that I would need to implement by communicating with redux (i.e. by subscribing to state changes) rather than through the router directly.
I'll keep looking into this and self-answer if I get something working, but I would be very interested to know if anyone else has already implemented this 'warn the user about unsaved changes when they're about to leave the page' functionality in an app that uses UniversalRouter.
Related
Using the express and react Stormpath libraries, I have a fairly unique use-case:
Upon a successful Sign Up the user is automatically logged-in and asked a few questions. Depending on the answers the user gives, the user is then programatically added to specific Stormpath Groups. After this questioning period I then route the user to a Profile page where they can edit some profile data, etc. I need to know which groups the user is in, in order to render the correct Profile elements etc.
I think the easiest way to commonly do this is just to use this.context.user to determine which groups the currently logged-in user is a part of. However, I notice that even after the user has successfully been added to these various groups, whenever I inspect this.context.user I notice that it does not reflect the groups they have just recently been added to. In order to get this.context.user to reflect the recently added groups, I need to do a full page refresh which in turn 'refreshes' this.context.user.
I am wondering if there is a way to 'refresh' this.context.user. I would prefer a solution that does not refresh the page, and I would also prefer having not to call a server-side endpoint to determine which groups the user is in.
A GET to the /me endpoint is the best way to "refresh" the user information.
also be aware that Stormpath has joined Okta and that the API will go offline at noon on 8/17/2017
I'm developing an application using Vue2 and Vue-router (version ^2.2.0) and the back and forward navigation buttons have to show if the user can go back/forward or not.
To check if the user can go back it's simple: if the user is not at the home screen, he can.
The problem comes when checking whether or not the user can go forward, since I need to check the router's history, but I haven't been able to do so.
Is there a way to check if the router has "somewhere to go when calling router.go(1)"?
A web application? router.go(n) is history.go(n) so it's the same limitations as that. It would be unsafe to expose a persons history to a website. Also, just because they're home doesn't mean they can't go back and just because the user can go forward doesn't mean it'll navigate to something in your app. If you're trying to replicate the forward and back button you're going to have a bad time.
If it's not a web app then you'd need to manually track the users history and splice and replace and push just like the browser does.
Have you enabled the HTML5-history-mode configuration? Documentation can be found here.
You may also need to enabled it in your server. If you're using express, I've got this line in my server code:
app.use(require('connect-history-api-fallback')());
I have a question regarding routing in a react client CMS app that I'm working on. We use react-router but this question has to do with routing in general.
While the user visits a page of a website, we have a drawer/sidebar which allows the user to manage basic entities of the website like pages, media, users etc. Currently we are using redux actions to show/hide elements in the page. We found this a little bit confusing and not very practical. We want to change that and to move this navigation functionality to the router. We use react-router of course.
We are thinking to add some additional routes to the app in order to keep the currently visible page in the url. For example consider that the user opens the app and visits a page:
#app/page/someflag
Now consider that the user wants to manage users:
#app/page/someflag/manage/users
In this case a sidebar/drawer appears with a list of the users and when we click to edit one of them we can have a route like:
#app/page/someflag/manage/users/edit/10
Do you thing these routes are ok? Any suggestions?
I am building a web app using React (15.3.0), Redux (3.5.2) and react-router (2.6.1). I include the versions as I've seen a few related posts but they reference old versions of these libraries.
I have some state that I would like to persist on the URL so that the user can deep link to it. By deep linking, I mean that a user can link directly to a state of a page. I have various pages in my app, each page has a separate reducer, the state for each page should persist between pages.
I've read Dan Abramov's recommended approach: How to sync Redux state and url hash tag params
Which seems ok, apart from persisting state between pages.
An example scenario:
User lands on page one: /page1
User interacts with the page causing state to be saved in the URL: /page1?state={...}
User goes to page 2: /page2
User interacts with page 2: /page2?state={...}
User links to page 1, expecting to see that page as they left it. Problem! How do we recover the state from page 1?
I've looked at react-router-redux, but I can't tell if it does what I need it to?
Is there a common approach to this problem? If so what is it? If not, can you suggest an approach?
I'm sure there is more than one answer to this; you just need to pick one and implement it.
If it were me, I would do this:
Use the redux store as the single source of truth for state
Subscribe to the store in some way (perhaps a redux middleware) and update the url params when the relevant state for page1 changes
If a user visits /page1, use the stored state (I'm assuming state will need to be synced to a server to be able to store/recover it).
If a user visits /page1?state={...}, either a) merge the URL state into the stored/recovered state or b) skip recovering and use the URL directly.
I would even go further and NOT sync the state to the url, since that seems like wasted effort (unless users are relying on bookmarking a page). Just render a React component saying "Share this URL" and have it render a URL with proper query params.
I need a stateless way to implement the back button feature in an ajax forum such that if a user is on page 2 of the topics ajax page, and then clicks on the message - when the user then hits the back button they can go back to the point of the message on the topics ajax page. - your help would be much appreciated.
::Please remember I want a stateless way of doing this, such that it's done client side::
The only option you have is to implement a client-side routing mechanism which you can either achieve by changing the # in your url whenever you change state. For instance your topics page has a url like yourforum.html#topics and whenever a user clicks on a message, you redirect (client-side) to yourforum.html#message/3.
Your JavaScript code should listen to those hash changes and react accordingly by loading topics/messages.
There 2 ways of client-side routing:
changing the hash like in the example I made
HTML5 push-state
Many modern JavaScript frameworks like Backbone, JavaScriptMVC etc... support routing. So you might take a look at those. TodoMVC might be a good starting point. Otherwise try to google for some jQuery plugins which give you this kind of functionality.