Any quick-and-easy answer to the scenario where you want to build something like a simple questionnaire with React and React Router where you don't want the user to be able to modify the URL to browse anywhere and you also don't want to push history state into the browser, essentially preventing use of the back button?
Sample routes might look like:
questions/1
questions/2
questions/3
...so on
But the URL should stay the same at all times and the history won't change, essentially what a single page app without routing would behave like.
For the history part, you would need to use replaceWith() everywhere you want to change route.
If you're using <Link>, you could create your own version which uses replaceWith instead of transitionTo - you should just be able to copy its implementation and replace the PropTypes require call with require('react-router/lib/PropTypes').
I can't immediately think of a non-horrible way to prevent the user from jumping around though - presumably you also want the app to break if they try to start on anything but the base URL? I would just use some simple state to control which component is currently being rendered instead of using React Router if that's the behaviour you really want.
Related
I need to add a chat in my nextjs application and I decided to manage it like twitter. You actually can navigate in your chat from the dashboard and then you can choose between your chats by clicking them and next to the list there opens the actual chat.
I think they use nested routes or something like that because you go from /messages to /messages/{id} without actually go to a new path.
What I need is on click of the chat I don't want to go to a new route, but I need to load the chat component and set the pathname from ´/messages´ to /messages/{id}. This is necessary to keep it open in case of refresh of the page. So is there a way to do that in nextjs? Pushing it to a new route implies to duplicate code which is not a good thing, because I would need to keep all the components that are also in /messages plus the chat component.
You can use dynamic routes and optional catch all routes (https://nextjs.org/docs/routing/dynamic-routes#optional-catch-all-routes)
For example, you can create a "messages" folder inside "pages", and create a [[...id]] document (the param inside double brackets is optional).
This way you will be able to have a messages route that may have an id param or not.
And, inside a useEffect for example, once you have fetched your discussions, you can use next router to push your "messages" route with a discussion id and then navigate how you want to.
While I was using Link in React Router and history.push method,
I realized I have used those two method without proper knowledge.
I have used Link tag makes user possible to go to another component, and used history.push to make back button available.
But hard to tell the difference except history method stacks a trace.
What is the difference between Link and history.push besides I have mentioned above and how to use them properly?
With the Link you can navigate to another "page" by wrapping it for example a button and do the redirect when clicking. Mostly this is what you probably want to do.
But in some cases you want to navigate to another "page" programatically. For example when something changes in your app that has nothing to do with clicking on a button or link.
So you can use history.push to change the url programmatically without the need to click on a button or a link.
I hope this clears it for you
I have a React application (that uses React Router) with five "routes"/sub-pages.
If the user enters information on a sub-page (e.g. checks a checkbox/enters text in an input field on the page), then visits another sub-page, and goes back to the previous sub-page, I want that sub-page to have retained the state the user left it in.
I also need to be able to retrieve the state of all sub-pages, at some point.
Is this possible/viable using React Router, or is there a better way to do it?
If you didn't want to use Redux or similar to maintain data between route changes, you could always have a wrapping component that sits above <Router> and passes data down to each relevant <Route> via react-routers render prop solution. You would need to provide callbacks for each update that a sub-section might need to make however, which isn't necessarily scalable.
Alternatively, another method is to take the state of the sub-section away from the component and into the URL via parameters, for example search filters that you might commonly see in URLs. However this isn't always desirable.
Implementing Redux would be a far better solution to the problem though.
Can I find previous paths in the history object? E.g. I go to "/activity/55" from "/home". Can I get the string "/home" somehow when I'm in the component for "/activity/55"?
history.goBack() works and takes me back to "/home" so the information is in there?
Or am I trying to do this the wrong way. I've seen some passing the previous path to each component. Ideally I'd like avoid tracking it manually.
I'm pretty sure that you can't: history.goBack is a tiny wrapper around window.history.go(-1). So the browser's native History object is what actually tracks it, vs the history wrapper used in react-router, and History doesn't expose the actual history stack state.
I'm creating a data fill in page, and I want to ask users to confirm that they want to leave the page. I see that react router provides an onLeave function with no arguments, but I don't see how to use it in the way I need.
Thanks