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.
Related
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
I'm currently developing a React SPA with a Spring Boot backend API.
For one use case i need to create a dynamic link which contains login credentials for a one-time-User. With this link a user needs to be able to login to the SPA and use it further from outside the application.
This is the first time I'm working with a SPA.
What is the best way to achieve this goal?
I would really appreciate some ideas.
best regards
You probably need to use a Router (like React Router). These cause different components to be rendered in React depending on the current URL, and from there different code can be run (likely from event handlers or useEffect if you're using function components).
I developed a React component representing a window that allows the user to interact with a chatbot. This window opens when the user clicks a button. Now, I want to make this button available in any site or application of my choice. The first idea that came to mind is to associate a URL to this button so I can call it in our site or application by simply creating a link like:
Chat with the robot .
I find the idea functional but I do not know how to associate a URL to a component in React. I looked at the React-Router side of what I understood it just allows to create the navigation between component of the same application but I do not know if its URL can be accessible outside the application where they are created.
Do you know any tips for solving such problems?
And if you have ideas other than linking the URL to the component, I'm interested.
Thank you in advance !!!
You cannot use a react component by pulling it in as external code. react-router works by wrapping you application. Any component you want to use has to be part of the actual codebase.
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.