Give a single-page app real URLs with React Router

Every link on my app points at the same page, and sharing a link with someone just lands them on the homepage.

Beginner to intermediateRead 5 minDoing: an hour or two6 steps

▶ Start

What you'll have at the end

A working nav bar where each link changes the URL and renders a different page

Before you start

You need

A React app already split into separate page-shaped components, such as a plant list, a single plant's view, and an add-plant form, that the app swaps by hand with a state variable instead of through the browser's own address bar.

Not covered

Configuring your hosting so a deep address for a single plant still finds the app after a full page refresh instead of failing at the server.

Leans on

Turn the address bar into the source of truth

Wrap the app in a browser router
Map each address to its own page

Keep one shared frame around every screen

Give every page one shared layout
Turn nav links into real router links

Handle one plant and one bad address

Read one plant's id from its own address
Send bad addresses somewhere real

Checked 22 Aug 2026

Part of the React Frontend Framework cookbook