I need user history for some redirection. How can I access it? If I couldn't there are the best practices to store the user history in my app.
Accessing browser history is not directly linked with NextJS.
If you want to access browser history, you can directly access it with window history object (Browser Object Model).
In Nextjs use nextjs router hook for handling redirections.
Also you can use window or document browser objects, but make sure they are client rendered instead of server, as they will be undefined in server.
more you can read here
Related
In my Next.js application, I'm having the well-known problem of being able to navigate via <Link> to dynamic routes, but when I refresh that page, I get a 404 error since the page was rendered client-side. The app is serverless, so a custom server isn't an option, and the paths I need can indeed be fetched from an API, but that API requires token authentication first so I can't populate the paths I need to pre-render with getStaticPaths either. This app is dynamic, and the pages I'm trying to access through dynamic routes use a lot of Client-Side Rendering anyways, so I don't have a problem with pushing rendering over to the client. I just need to know how to do that if that's the solution, and those two solutions (custom server and getStaticPaths) are the only two I've been able to find.
EDIT: I also use next export to deploy.
This is probably a duplicate question, but I'm struggling to find what I need. What I'm trying to achieve is a "session" that stays live until the user logs out. What I need to store in this session is username of logged user, and possibly isloggedIn boolean flag to use in my router. Previously, I was using sessionStorage while developing the app, but now that it's time for go-live I will need a more secure approach. My idea is to simulate sessionStorage but in memory. I need a session object that will hold the aforementioned information and will not reset its state on component re-render or whenever I manually change the URL route in the URL bar of the browser. I tried using static attributes in a method, but it looks like the import of the class in the application is reloaded every time the state of the static attributes is reset. I'm using axios as my HTTP client and JWT tokens as authentication for server requests, however I would like to use the session object to manage the routing of the app. I look forward to you replies. Thanks in advance.
I have a use case where I want to open a react application in new window whenever user clicks a button. I want to pass some props to the react application. Presently I am sending the props via appending them to URL.
Example
Let's say my application is accessible at lomoto/car. I am currently sending parameters via lomoto/car/value1/value2. I am accessing these properties via props.match.params.prop1 and props.match.params.prop2. I am using react-router v4 for routing.
Is there any other recommended way of achieving this?
You can save the state to the browser's local storage and then access it from any tab.
In this egg head video Dan Abramov explains how to make use of the browser's local storage for redux.
You can use a similar approach with or without redux.
I want to store my rendered component (in ReactJs) into browser history of clients, but I don't want to use Redux for it, because it is so complicated for me.
Is any way for using local storage or cookies as alternative solution for Redux and React Routing?
Edit:
I need to using react route with cache rendered data, It means after route change and got back to previous page again, rendered data still remains there and no need to send request to server again! Like this Redux example, But need to do it without Redux.
Thanks.
Redux is a state management, not related to cache or local storage. If you want to cache your components then you should look at this https://developer.mozilla.org/en-US/Apps/Fundamentals/Offline
You need to create manifest which will store your components in the cache.
BACK STORY: I am creating a react app which uses back-end-api JSON based authentication for log-in, after user is validated back-end returns a JSON token for future requests.
WHAT AM I DOING NOW: I am passing down that token from one component to another using props (and yes, that's not very elegant nor clean).
WHAT I AM LOOKING FOR: Someone after seeing the project suggested me to store the token & other redundant data in browser memory. Now, I don't know how to do that nor I was able to find any resources.
BUT: I believe that this problem can be solved by redux. But I want to create a react only app first before jumping to redux or some other advanced stuffs.
So, how do I store these type data in browser memory itself?
Or, is there any more elegant solution to this?
Also, gimme some advice about session management. Like when token expires the user is shown a dialog and redirected back to login page.
why not you simply go for LocalStorage ? like this
localStorage.setItem('user_info', JSON.stringify(response));
For more info refer here
https://www.w3schools.com/html/html5_webstorage.asp
https://www.w3schools.com/html/html5_webstorage.asp
Update
To get values from locastorage you can use the syntax below -
localStorage.getItem('user_info');
Redux is a state container for react. It helps you to manage all states in react app. But you can still live without it (barely) using local state and props. Besides, you can use localStorage and cookies to store whatever you want.