React-router: Passing data through routes

Question

I'm trying to figure out the best way to pass data through my routes. I know I can use params but there are certain types of data that don't belong in params.

For example: I have an index page that displays a list of applications. Each application has a button next to it which will route you to the view for that application.

I want to pass the application itself to the Application handler. However, it doesn't make sense to pass the entire application through params. Though it does make sense to pass the application identifier to params (i.e. :id or :name)

So the way I think I should be doing this is pass the application identifier to params, then in the Application component search my ApplicationStore for the appropriate application given the identifier.

Though, wouldn't it be easier and faster to pass the application itself? Is there a way to do this. Is there a reason not to do this?

Here is some code:

<Link to="showApplication" params={{name: application.name}}>View</Link>

or

<Link to="showApplication" params={{application: application}}>View</Link>

Thanks in advance!

Brooks

how did you solve it final? I think the first answer is not what you want. – Begonia

I have the same question :( – Begonia

Answer 1

The problem is that when the person refreshes, or in some other way directly loads the url, it needs to show the correct view. Because URLs are just strings, you need to represent the route as a string. You can't (easily) shove an actual application into the url.

The job of a router is to take that string (the URL) and map it to the actual code (the handler), and provide any extra data (the params, query, and/or hash).

Your job as a router user is to ensure there's enough information in the URL for the router to pick the right handler, and for the handler to have enough information to do its job (e.g. which application to show).

If the url is something like mysite.com/showApplication, there's clearly not enough information.

If it's something like:

mysite.com/showApplication/React.createClass(%7Brender%3A%20function()%7Breturn%20React.createElement('div'%2C%20null%2C%20%22I'm%20an%20application!%22%7D%7D)%3B

i.e. putting an application in the url, that's too much information, and generally a very bad idea.

But mysite.com/showApplication/applicationName is just right :-)

Waechter

Ehm you forgot an actual use case for this, in my case I generate an object by a bunch of ajax requests; I send some of the information via the params including an id to a different route, I can regenerate the whole object via the id, no problem, but if I could send the object I'd save bandwidth, if the object is undefined, it'll be regenerated by the id, an actual use case. – Jodhpur

Answer 2

I'll provide an easy and hacky way, have a global object which you use to share information across routes eg.

window.CONTEXT = {'share':'this'}

Note that it's quite important only to use this way if the object you want to share can be recreated by the route itself, as FakeRain mentioned above the route has to contain just enough information for it to give the user the same experience if they reload.

The only reason you'd use this is to save bandwidth if you need to request information for what you want to share but yet you don't want a huge link.

Jodhpur