Using Route Params in react-router Links

John Eletto
October 12, 2021


Stable allows businesses to create virtual addresses. Since many of our customers conduct business in multiple states, they often want to access multiple addresses under one account. These addresses can include mailboxes or registered agents across multiple states. Previously when a customer needed multiple addresses for their business, they would create multiple Stable accounts with different emails. To improve the experience of our customers, we recently introduced a way to access multiple addresses under one account.

To ensure that Stable customers can work effectively with their teams, we make it easy for them to share links to different pages throughout the site. As we built support for multiple addresses under one Stable account, we wanted to make sure that this remained true. In order to support link sharing with multiple addresses, we knew that we needed to store which address the user was viewing in the URL for every page.


Using react-router, developers can use URL parameters when defining routes. One example would be a route which is defined as /location/:locationId/mailroom where locationId represents the user’s current address. By doing so, we ensure that every route is scoped to an address. It's important to know which address the user is currently viewing so we can display the correct data. Although this works well for defining routes, navigating to them can be cumbersome when each component needs to know the user's address to link to another page.


Dynamic Links

We developed a <DynamicNavLink /> component to easily link to new pages without needing to know the user’s current address. It wraps the <NavLink /> component from react-router-dom to replace URL parameters with those that are currently present. Developers can now define their links using the same syntax as route definitions. 


Previously:


Now:


The new <DynamicNavLink /> component takes advantage of react-router match. The component looks for :locationId in the to prop and changes it to the user's current location.



Using DynamicNavLinks, our team can implement location-aware features quickly. It allows us to query the current location only in the places where we care about it. As a result of replacing all of the links with DynamicNavLink, we can easily keep our routes scoped to a location.


A virtual address + mailroom for startups
Learn More