Route parameters

When you develop React web applications, some of your routes have dynamic data in them. For example, you can link to a details page and, within that URL, you'll have some sort of identifier. The component then has what it needs to render specific detailed information. The same concept exists within react-navigation. Instead of just specifying the name of the screen that you want to navigate to, you can pass along additional data.

Let's take a look at route parameters in action:

1. We'll start with the App component:

import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import Home from "./Home";
import Details from "./Details";

export default createAppContainer(
  createStackNavigator({ Home, Details }, { initialRouteName: "Home" })
);

This looks just like the navigation basics example, except instead of a Settings page there's a Details page...