Websites · Glossary

What is React Router?

React Router is an open source library for React that connects web addresses to the screens of an app, so /menu shows the menu and /contact shows the contact page, with links that switch screens without a full reload. In its framework mode it can also build whole websites, prerendering pages to HTML and loading data for each route.

React builds user interfaces from components; React Router decides which components appear for which address. It is one of the most widely used libraries in the React world.

· Co-founder

3 min read · Published

What routing means

Every page on a website has an address. Routing is the code that decides what to show for each address. React Router lets developers declare routes, such as the home route, a services route and a contact route, each pointing to a component, and handles moving between them.

Library and framework

Used as a library, React Router handles navigation inside a React app running in the browser. In framework mode, which grew out of the Remix framework, it also handles building the app with Vite, loading data per route, setting page metadata and prerendering routes to static HTML files that search engines and fast first loads benefit from.

Why links matter

React Router provides a Link component that switches screens instantly by updating the address and rendering the new route, without asking the server for a whole new page. Plain HTML links still work but cause full reloads, which is slower and loses some app state.

Common mistakes

Building internal links as plain anchors so every click reloads, forgetting to set titles and descriptions per route, and assuming a client only app will be read well by search engines. Prerendering or server rendering fixes the last of these.

Where it shows up in OneCraft

Code mode writes each site as a React Router project, styled with Tailwind and built from shadcn/ui components, with one git repository per site. The AI is required to use Link for internal pages and to set meta on every route, and the build prerenders pages to static HTML that a browser layout check opens at 375, 768 and 1280 pixels.

Questions people ask

Do I need to learn React Router to use a code website builder?

No. In a chat driven code builder the AI writes and edits the routes for you, and you describe changes in plain words. Knowing the basics helps if you download the project to hand to a developer, who will recognise the structure immediately.

Is React Router the same as Next.js?

No. Both build React websites with routing, data loading and prerendering, but they are separate projects with different conventions. Next.js is maintained by Vercel; React Router is an open source project that merged with Remix. Either can produce fast static pages.

Is React Router free?

Yes. React Router is open source under the MIT licence, which allows commercial use. You can build, host and sell sites made with it without fees, as long as you keep the licence notice in the code. The same applies to React itself and most libraries a React Router project uses.

Does React Router help SEO?

In framework mode, yes: pages can be prerendered to HTML with their own titles and descriptions, which search engines read directly. A purely client side app that renders everything in the browser is harder for some crawlers and slower to show content.

What is a route in React Router?

A route pairs an address pattern, such as /products/:handle, with the component and data loading code for that page. Routes can be nested so layouts like a header and footer wrap many pages, and a route can declare its own metadata for the page head.

Make one with websites

The button opens the generator with this use case already described. Change the wording to match your own.

Create a website with OneCraft

Related questions

Sources

Written and checked by the OneCraft team. Last checked .