14- Final First React Project(Single Page Application by React Router)

 

Creating our first single page application TextFormat

These are the following steps we will perform to create our SPA:

1- We are using <BrowserRouter> so we need to import dependencies required in App.js

src --> App.js

import {

  BrowserRouter ,

  Routes,

  Route,

 

} from "react-router-dom";

Also we are  navigating URLs via Navbar component therefore import Link dependency and 

Change  anchor tag  <a> to <Link>

src --> components  -->  Navbar.js

import React from 'react';

import propTypes from 'prop-types';

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

export default function Navbar(props) {

  return (

      <nav className={`navbar navbar-expand-lg navbar-${props.mode} bg-${props.mode}`}>

  <div className="container-fluid">

   

    <Link className="navbar-brand"to="/"> {props.title} </Link>

   

    <button className="navbar-toggler" type="button" data-bs-toggle="collapse"

data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

      <span className="navbar-toggler-icon"></span>

    </button>

    <div className="collapse navbar-collapse" id="navbarSupportedContent">

      <ul className="navbar-nav me-auto mb-2 mb-lg-0">

        <li className="nav-item">

         

          <Link className="nav-link " aria-current="page" to="/">Home</Link>

        </li>

        <li className="nav-item">

         

          <Link className="nav-link " to="/about"> {props.about} </Link>

 </li>

       

   

      </ul>

      <div className="form-check form-switch">

  <input className="form-check-input"onClick={props.ToggleMode} type="checkbox"role="switch" id="flexSwitchCheckDefault"/>

  <label className={`form-check-label text-${props.mode1} htmlFor="flexSwitchCheckDefault"`}>Enable Dark Mode</label>

</div>

   

    </div>

  </div>

</nav>

   

   

  )

}

// To check wheter the value put satisfies your commands or not

  Navbar.propTypes = {

    title:  propTypes.string.isRequired,

    about: propTypes.string

  }

 // To set default value when no value is given

 Navbar.defaultProps = {

  title:"Title Here",

   about:'About Here'

 };

2-  Write final code using router components in App.js

import React, { useState } from 'react'

import './App.css';

import Navbar from './components/Navbar';

import Alert from './components/Alert';

import TextForm from './components/TextForm';

import About from './components/About';

import {

  BrowserRouter ,

  Routes,

  Route,

 

} from "react-router-dom";

function App() {

  //Using State to Generate dismissable alert

  const [alert, setAlert] = useState(null);

   const showAlert = (message, type) => {

    setAlert(

      {

        msg: message,

        type: type

      }

    )

    setTimeout(() => {

      setAlert(null);

    }, 1500);

  }

  // Using State to apply Dark Mode and Light Mode CSS

  const [Mode, setMode] = useState('light');

  const [Mode1, setMode1] = useState('dark');

  const toggleMode = () => {

    if (Mode === 'dark') {

      setMode("light");

      setMode1("dark");

      document.body.style.backgroundColor = 'white';

      showAlert('Light Mode is Enabled', 'Success:')

    }

    else {

      setMode("dark");

      setMode1("light")

      document.body.style.backgroundColor = 'indigo';

      showAlert('Dark Mode is Enabled', 'Success:')

    }

  }

  return (

   

 

 <BrowserRouter>

     

   <Navbar title="TextBox"about="About" mode={Mode} mode1={Mode1} ToggleMode={toggleMode} />

   <Alert alert={alert} />

     

<Routes>

         

       <Route  path="/about"element={<About />}>

       </Route>

      <Route  path="/"element={ <TextForm heading="Enter your text to analyse" mode={Mode} mode1={Mode1} ToggleMode={toggleMode} showAlert={showAlert} />}>

      </Route>

       

     </Routes>

 </BrowserRouter>

 );

}

export default App;

Image 1 - BrowserRouter

Image 2 - Home URL ("/")

Image 3 -  About URL ("/about")