Engineering

Using Route Params in React Router Links

October 12, 2021
John Eletto


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.


React Router Example: 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:

Previous NavLink code


Now:

After DynamicNavLink code


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.


New DynamicNavLink component


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.

--

At Stable, we provide permanent virtual addresses and mailboxes so you never have to worry about mail or changing addresses again. We’ll digitize all mail that you receive here, and you’ll be able to scan, forward, shred, (and even deposit checks!) from anywhere in the world.

Get started with Stable here if you’d like a virtual business address + mailbox in less than 3 minutes. 

Disclaimer: Stable is not a legal or accounting firm, therefore we cannot provide legal or tax advice. You should consult legal and tax professionals for advice on how to meet ongoing obligations that apply to you and your company.


Get 50% off your first year with Stable

Get a special discount on our virtual address + mailroom sent to your inbox
Oops! Something went wrong while submitting the form.
A virtual address + mailroom for businesses
Learn More

Get 50% off our Grow plan

Get a special discount on our virtual address + mailroom sent to your inbox
Thank you! We'll email you soon with the referral code.
Oops! Something went wrong while submitting the form.