Day 25 || React Router || Router in React || Routes in React || Route in React || Link in React

 React.js Topics

Day 25:

• React Router

• Router

• Routes

• Route

• Link

React Router:

App.js:

import HouseComponent from "./Components/HouseComponent";

import MarketComponent from "./Components/MarketComponent";

import ArtCompetitionForm from "./Components/ArtCompetition";

import Playground from "./Components/Playground";

import {

  BrowserRouter as Router,

  Routes,

  Route,

  Link,

} from "react-router-dom";

import './App.css'

function App() {

  return (

   

    <Router>

      <div className="app-container">

        <div className="sidebar">

      <Link to ="/" className="sidebar-btn">Home</Link>

      <Link to="/deliveryService" className="sidebar-btn">Delivery Service</Link>

      <Link to="/artCompetition" className="sidebar-btn">Art Competition</Link>

      <Link to="/playground" className="sidebar-btn">Play Ground</Link>

      </div>

      <Routes>

          <Route path="/" element={<HouseComponent />}/>

          <Route path="/deliveryService" element={ <MarketComponent />}/>

          <Route path="/artCompetition" element={<ArtCompetitionForm />} />

          <Route path="/playground" element={<Playground />} />

        </Routes>

        </div>

    </Router>

  );

}

export default App;

App.css

.app-container {

  display: flex;

}

.sidebar{

    background-color: #202020;

    padding: 20px;

    flex: 0 0 240px;

}

.sidebar-btn{

    color: white;

    display: block;

    padding: 10px;

    text-decoration: none;

}

.sidebar-btn:hover{

    background-color:gray;

    border-radius: 5px;

    color:red

}

Interview Questions:

1. What is React Router, and why is it used in React applications?

2. Explain the significance of the Link component in React Router. How is it different from an anchor (<a>) tag?

3. What is the purpose of the exact prop in the Route component?