What is the purpose of passing data through parameters on the Route using react-router?
let's take an example of a chat in which on the left you have a list of chats and on the right you show the chat that the user has selected. Many website (Instagram for example) would pass the id of the chat as a parameter of the url.
My question is: as you probably have the id of the chat you want to get the data from, what is the purpose of passing it as a parameter to the URL instead of just call a function that fetches the data of that chat directly?
One reason is that if you reload the page you will lose in which conversation you were and instead of remaining in the same conversation you will get an error or start from "state 0", also if you want to share the URL or bookmark it to go to that exact conversation, you will need the parameter in the URL
Related
Heyy,
Currently I am using react-location for routing and I am new with it.
I want to pass data from one page to another.
Is there any way to do it.I have read the documents but i am unable to find solution of my problem.
Thanks in advance.
I used navigation like this,
navigate({to: `/auth/reset-password`})
and with this i want to pass entered email field data.
I'm having trouble understanding a weird behaviour when using Apollo Client.
Here is a little bit of context, maybe I missed something:
I have an app that displays lists of items.
Thanks to routing, each list has its own route :
/list/:listId
Each list has its own settings, and these settings are used to know which item details are displayed (per se, on one list I can decode to show the price of my item, and hide it on another list)
Now, the problematic part: I'm using the apollo client useQuery hook to fetch my list. the listId is obtained through the react-router-dom useParams hook, and then passed as a variable to useQuery, and that's my whole point:
useQuery(ITEM_LIST, {
variables: {
listId,
}
})
Even when passing a new listId by navigating from a list to another, apollo still fetches the settings from my previous list, for a very short moment, resulting in a glitchy user experience (details that should not be displayed are displayed for a moment, then immediately disappear)
I read a few articles regarding apollo caching issues, such as this one, but still, didn't manage to find the source of this problem. Here are the things I've tried so far:
alias the id field in my query
make sure my server returned a response with a unique ID
Has anyone seen this before?
I am having a problem in ReactJS. I want to create a text editor ( with ReactQuill). So, I want different accounts for each user, such that, if one person creates a note and edits it in his account, the other person should not see this.for example this is my current stage - https://wright-text.web.app. After you create your account and login you would see a note called first note because that's the note I created. What should I do so that when you login you see no notes because you have not created a note, but when I login, I should see the note I had already created. How would I do this ??
You need to add a scope to notes endpoint so that user could only GET notes, which they have created.
You need to add query parameters in the API you are fetching. For example, if you are fetching data via a GET request, add in some specific user id that you assign to your user upon validation and then fetch data of a particular user using that id as a query parameter on your API.
If I want to display many posts in my web application but every post have its own type and I want to display each type in single page so, What's the best method to do that? Is put all all posts in one url and use query string to filter the posts upon the type and display it in the page?
For example : axios.get('/posts?type =sport')
Or I have to put every single type in separate Url
For example: axios.get('/posts/sport')
Also one more question please?
use one reducer to manage every posts or create one reducer for each post type?
you can add a dynamic route to every new type.
Ex:
'/transaction' -> component-1
'/transaction/:type' -> component-any (multiple)
welcome to Stackoverflow!
I can imagine you have a web API of some sort serving a URL /posts. You want to consume that endpoint from your web application, and you are using axios to do that. I can assume you are using JSON to return that data. Correct me if I'm wrong.
Now that the basic information is "clear", what data you serve from the endpoint, and how it is requested from the client is up to you. Do you want to ask the server what types are there first, and then do one AJAX request per type? Ok. Do you want to serve all posts independent of their type? Ok. Do you want to accept POST data in your controller so you can filter the results before returning a response? Ok.
If you are looking for a more specific answer, you must give more details, or specify more. But I hope I could be of help.
Edit: complete answer.
If you want to filter the results, you have to send some additional data in your POST request, in this case, your post type. In axios, this could be done like this:
axios.post('https://example.com/posts', {
type: 'sports'
}).then((data) => {
console.log(data);
});
You can obviously get the "type" value from a select input, other variable, even the current router page. I don't know your exact setup, but you can always come back and ask ;)
THEN, in your API controller you have to get that POST parameter type, and use it to filter the results. Again, I don't know your exact setup, but for MySQL if would be a WHERE statement in your query, or similar.
I want to pass a url parameter in salesforce, but it shouldn't be visible to the end user in the url. Is it possible? Please suggest if there are any other alternatives? Thanks in advance.
In my scenario, I am dealing with 2 pages with individual controllers. In one of the page I am dealing with apex tabs. So I want to get the current tab name. I found the solution for this as passing it into to the url.
You don't have to pass parameters between pages using the URL, you can do this using form parameters which will "hide" the values from the user (nothing displayed in the URL) like this:
<apex:param name="contIdParam" value="{!cont.id}" assignTo="{!contIdChosen}"/>
This article may be helpful: http://bobbuzzard.blogspot.co.uk/2011/07/passing-parameters-to-apex-method-from.html