Setting Up Routes

React Router is an essential part of any React application. It enables navigation among views of various components in a way that maintains the application state.

Let's start with installing the necessary libraries.

You can install React Router into your project by using npm (Node Package Manager). Run the following command in your terminal:

npm install react-router-dom

After the installation, you can import the required components from the 'react-router-dom' package.

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

In the above line, we're importing BrowserRouter, Route, and Switch from 'react-router-dom' package.

• BrowserRouter: It's a router implementation that uses HTML5 history API (pushState, replaceState and the popstate event) to keep your UI in sync with the URL.
• Route: It's a way to declare what component should be loaded when a specific URL is hit.
• Switch: It's used to render only the first Route or Redirect that matches the current location.

Let's set up some routes:

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

import Home from './Home';
import About from './About';
import Contact from './Contact';

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

export default App;

In the above code:

• We're wrapping our routes within the Router component. This tells our app we're going to use routing.
• The Switch component will only render the first Route or Redirect that matches the current location.
• Route components are where we define our routes. The path prop tells the router which path to render the component on. The component prop tells the router which component to render when the path is visited.
• The exact prop ensures that the route is only rendered if the path is an exact match. Without this, the 'Home' component would also render on '/about' and '/contact'.

To navigate between these pages, you can use the Link component:

import { Link } from 'react-router-dom';

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

export default Navigation;

In the above code, we've created a simple navigation bar with links to our routes. The to prop on the Link component is equivalent to the href attribute on an HTML anchor tag.

That's it! You've set up basic routing for your React application. With this, you can create separate components for different parts of your application and link them together using React Router.

Remember, there's a lot more you can do with React Router, such as creating dynamic routes, nested routes, redirects, route transitions, and more. But for now, this should be enough to get you started. Happy routing!