React Router - rs-hash/Senior GitHub Wiki

Set up routing using a library like React Router.

Setting up routing in a React application can be done using libraries like React Router. React Router allows you to define multiple "routes" in your application, each corresponding to a different URL or route, and it handles rendering the appropriate components for each route. Here's an example of setting up routing using React Router:

First, you need to install React Router if you haven't already. You can do this using npm or yarn:

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

Now, let's create a basic example with three routes: a home page, an about page, and a contact page.

App.js:

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import HomePage from './HomePage';
import AboutPage from './AboutPage';
import ContactPage from './ContactPage';

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/contact">Contact</Link>
            </li>
          </ul>
        </nav>

        <hr />
         <Routes>
            <Route exact path="/" element={<HomePage/>}></Route>
            <Route path="/Parent" element={<AboutPage/>}></Route>
            <Route path="/Controlled" element={<ContactPage/>}></Route>
          </Routes>
      </div>
    </Router>
  );
}

export default App;
⚠️ **GitHub.com Fallback** ⚠️