Static Routing in React Router Explained

# Static Routing in React Router: Creating Fixed Routes in React Applications Navigation is one of the most important parts of any web application. Whether you're building: * a blog * an e-commerce website * a portfolio * a dashboard * a SaaS application users need a way to move between different pages. In React applications, routing is commonly handled using **React Router**. One of the first routing concepts every React developer should learn is **Static Routing**. Static routes are predefined routes that always point to specific pages. In this guide, you'll learn what static routing is, how it works, and how to create static routes using React Router. # Prerequisites Before learning Static Routing, make sure you understand: * [React Components](/react-components) * [React Props](/react-props) * [React State](/react-state) * [React Router Introduction](/react-router-introduction) These concepts will help you understand React routing more effectively. # What is Static Routing? Static Routing refers to routes that are predefined and do not change dynamically. Example URLs: ```text id="static-routes-example" /home /about /contact /services ``` Each URL always displays the same page component. Example: ```text id="route-mapping" /about ↓ About Component /contact ↓ Contact Component ``` The route path remains fixed. # Why Do We Need Static Routing? Without routing, React applications would display only one page. Routing allows developers to create multi-page experiences while maintaining a single-page application architecture. Benefits: * better user experience * organized navigation * cleaner application structure * SEO-friendly page organization * easier scalability # Installing React Router Install React Router: ```bash id="install-react-router" npm install react-router-dom ``` This package provides routing functionality for React applications. # Setting Up BrowserRouter Open: ```jsx id="main-file" src/main.jsx ``` Wrap your application: ```jsx id="browser-router-setup" import React from "react"; import ReactDOM from "react-dom/client"; import { BrowserRouter } from "react-router-dom"; import App from "./App"; ReactDOM.createRoot( document.getElementById("root") ).render( <BrowserRouter> <App /> </BrowserRouter> ); ``` Now React Router is available throughout the application. # Creating Pages Example folder structure: ```text id="pages-folder" src/ ├── pages/ │ ├── Home.jsx │ ├── About.jsx │ └── Contact.jsx ``` Home page: ```jsx id="home-page" function Home() { return <h1>Home Page</h1>; } export default Home; ``` About page: ```jsx id="about-page" function About() { return <h1>About Page</h1>; } export default About; ``` Contact page: ```jsx id="contact-page" function Contact() { return <h1>Contact Page</h1>; } export default Contact; ``` # Creating Static Routes Open: ```jsx id="app-jsx" App.jsx ``` Create routes: ```jsx id="static-routes" import { Routes, Route } from "react-router-dom"; import Home from "./pages/Home"; import About from "./pages/About"; import Contact from "./pages/Contact"; function App() { return ( <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> <Route path="/contact" element={<Contact />} /> </Routes> ); } export default App; ``` These are static routes because the paths never change. # Understanding Route Components A route contains: ```jsx id="route-structure" <Route path="/about" element={<About />} /> ``` ## path Defines the URL. ```jsx id="path-example" path="/about" ``` ## element Defines which component should render. ```jsx id="element-example" element={<About />} ``` When users visit: ```text id="about-url" /about ``` React renders: ```text id="about-render" About Component ``` # Creating Navigation Links React Router provides: ```jsx id="link-component" Link ``` Import: ```jsx id="import-link" import { Link } from "react-router-dom"; ``` Example: ```jsx id="navigation-links" <nav> <Link to="/"> Home </Link> <Link to="/about"> About </Link> <Link to="/contact"> Contact </Link> </nav> ``` These links change pages without refreshing the browser. # Complete Example ```jsx id="complete-static-routing" import { Routes, Route, Link } from "react-router-dom"; import Home from "./Home"; import About from "./About"; import Contact from "./Contact"; function App() { return ( <> <nav> <Link to="/"> Home </Link> <Link to="/about"> About </Link> <Link to="/contact"> Contact </Link> </nav> <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> <Route path="/contact" element={<Contact />} /> </Routes> </> ); } ``` # Behind the Scenes When a user visits: ```text id="user-url" /about ``` React Router: ```text id="routing-process" Checks Route ↓ Matches Path ↓ Loads Component ↓ Updates UI ``` The page updates without a full browser refresh. # Real Project Usage ## Portfolio Website Static routes: ```text id="portfolio-routes" /about /projects /contact ``` ## Blog Website Static routes: ```text id="blog-routes" /about /contact /privacy-policy ``` ## SaaS Dashboard Static routes: ```text id="dashboard-routes" /dashboard /settings /profile ``` These pages are predefined and rarely change. # Common Real-World Use Cases Static routing is commonly used for: * Home pages * About pages * Contact pages * Privacy policies * Terms pages * Service pages * Dashboard pages These routes are fixed and predictable. # Static Routing vs Dynamic Routing ## Static Routing Example: ```text id="static-example" /about /contact /profile ``` Routes are predefined. ## Dynamic Routing Example: ```text id="dynamic-example" /blog/react-hooks /blog/javascript-arrays /blog/react-state ``` Parts of the URL change dynamically. Dynamic routing is usually covered after learning static routing. # When NOT to Use Static Routing Avoid static routes when page content depends on dynamic values. Example: ```text id="dynamic-post" /blog/post-id ``` In such cases, dynamic routing is a better solution. # Common Beginner Mistakes ## Forgetting BrowserRouter Incorrect: ```jsx id="missing-browserrouter" <App /> ``` without: ```jsx id="browserrouter-required" <BrowserRouter> ``` React Router will not work properly. ## Using Anchor Tags Incorrect: ```html id="anchor-tag" <a href="/about"> About </a> ``` Use: ```jsx id="react-link" <Link to="/about"> About </Link> ``` to prevent page refreshes. ## Route Order Confusion Keep routes organized and grouped logically. ## Incorrect Imports Always import routing utilities from: ```jsx id="router-package" react-router-dom ``` # Static Routing Interview Questions 1. What is Static Routing? 2. What is React Router? 3. What is BrowserRouter? 4. What is the purpose of Route? 5. What is the purpose of Link? 6. How does React Router improve user experience? 7. What is the difference between Static and Dynamic Routing? # Watch Full Static Routing Tutorial If you prefer video learning, watch the complete tutorial below where we build multiple pages and navigation using React Router. [Watch the Full Static Routing Tutorial](https://www.youtube.com/watch?v=YOUR_VIDEO_ID) This tutorial demonstrates how routing works in modern React applications. # Internal Learning Recommendation Next, learn: * [Dynamic Routing in React Router](/react-router-dynamic-routing) * [Nested Routes in React Router](/react-router-nested-routes) * [Route Parameters in React Router](/react-router-route-params) * [Protected Routes in React Router](/react-router-protected-routes) These topics build directly on static routing concepts. # Build Something Practice Static Routing by creating: * Portfolio Website * Personal Blog * Company Website * Landing Page * Admin Dashboard These projects will help you understand route management in real applications. # Production Tip Professional React developers usually: * organize routes by feature * use layout components * create reusable navigation menus * separate public and private routes * keep route structures scalable A well-organized routing system improves maintainability as applications grow. # Why Static Routing Matters Static Routing is the foundation of navigation in React applications. Before learning dynamic routes, nested routes, and protected routes, developers must understand how fixed routes work. Mastering static routing makes it easier to build scalable and user-friendly applications. # Conclusion Static Routing allows React applications to display different pages based on predefined URLs. Using React Router, developers can create fast and seamless navigation experiences without refreshing the browser. Understanding static routing is an important step toward mastering React application architecture and modern frontend development.