Note: The Guide is still only an outline. Pull Requests would be greatly appreciated!
Routeis an object which contains a portion of your app’s Navigation state.
Locationdescribes the state of your entire application, a
Routetypically describes the portion of navigation state corresponds to one specific component within your application
TODO: Example of screen which can render one of two routes, each with different keys
You’ll often render different types of components based on the key. But how can you pass other information to the component?
Route objects can also hold a params object with further details on the route
Example of a screen rendering something based on its parameters
TODO: Example of a Route which holds another Route under its children property
One of the most important concepts to grasp about Junctions is that Routes are relative.
Routes only ever contain the information about their state and their children’s state. But they don’t know anything about their parents.
This means that any Route can be included in the children of another Route. And any navigable screen can be mounted in any other navigable screen
Example where the above route is mounted inside another screen, along with screen code
TODO: Image: Onion vs. Route
Like an onion, Each Route can contain a number of layers, linked by
Also like an onion, you only have access to the outermost layer of an Route.
But luckily, one screen generally only needs access to the information in the outermost layer.
Once we’ve got our information, we can peel off that layer by accessing the
children prop, and passing it through to our child Screen.
Conversely, just because we have a route, we cannot say where it came from. It may have had many layers. Thus routes must be relative.
In fact, its not just Routes which are like onions. React components are like onions too.
TODO: Image: React Component Block Diagram vs. Route Object block Diagram
It is this similarity that allows Junctions to meet its third principle: Pass your own props
Because the structures of React components and Route objects are so similar, manually passing the correct information to a child component is as simple as peeling off a layer and passing in the result.
Both React Components and Junctions
Route objects do not include any information about their original context. In onion terms, once you peel a layer away from a Route, the remaining Route will not know that the layer existed.
But even if a Route doesn’t know where it came from, it still has to have come from somewhere.