Basic Routing | Routing | React Tutorial

Setting up basic routes in React

React Router is a powerful library that allows you to add dynamic routing to your React applications. Setting up basic routes is the first step in creating a navigable React application. This tutorial covers how to set up basic routes using React Router.

Key Points:

React Router is a library for adding routing to React applications.
It provides components like BrowserRouter, Route, and Link.
Basic routing involves defining routes and navigating between them using links.

Installing React Router

First, install React Router using npm or yarn:

npm install react-router-dom
# or
yarn add react-router-dom

Setting Up BrowserRouter

The BrowserRouter component is the foundation of React Router. It wraps your entire application and provides the routing context.

// Setting up BrowserRouter
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

ReactDOM.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>,
    document.getElementById('root')
);

Defining Routes

Use the Route component to define individual routes in your application. Each route specifies a path and the component to render.

// Defining routes
import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Home from './Home';
import About from './About';

function App() {
    return (
        <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/about" component={About} />
        </Switch>
    );
}

export default App;

Navigating with Link

The Link component is used to create navigational links. It prevents the default browser behavior and allows React Router to handle the navigation.

// Navigating with Link
import React from 'react';
import { Link } from 'react-router-dom';

function Navbar() {
    return (
        <nav>
            <ul>
                <li><Link to="/">Home</Link></li>
                <li><Link to="/about">About</Link></li>
            </ul>
        </nav>
    );
}

export default Navbar;

Creating Components for Routes

Create the components that will be rendered for each route. Here are examples of Home and About components:

// Home component
import React from 'react';

function Home() {
    return <h1>Home</h1>;
}

export default Home;

// About component
import React from 'react';

function About() {
    return <h1>About</h1>;
}

export default About;

Full Example

Here is a complete example of a basic routing setup in React:

// App.js
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Navbar from './Navbar';
import Home from './Home';
import About from './About';

function App() {
    return (
        <Router>
            <Navbar />
            <Switch>
                <Route exact path="/" component={Home} />
                <Route path="/about" component={About} />
            </Switch>
        </Router>
    );
}

export default App;

// Navbar.js
import React from 'react';
import { Link } from 'react-router-dom';

function Navbar() {
    return (
        <nav>
            <ul>
                <li><Link to="/">Home</Link></li>
                <li><Link to="/about">About</Link></li>
            </ul>
        </nav>
    );
}

export default Navbar;

// Home.js
import React from 'react';

function Home() {
    return <h1>Home</h1>;
}

export default Home;

// About.js
import React from 'react';

function About() {
    return <h1>About</h1>;
}

export default About;

Summary

In this tutorial, you learned how to set up basic routes in React using React Router. Basic routing involves defining routes and navigating between them using links. You learned how to install React Router, set up BrowserRouter, define routes with Route, navigate with Link, and create components for routes. Understanding basic routing is essential for building single-page applications with multiple views in React.

React - Basic Routing