Web Page with React Router | IndianTechnoEra - IndianTechnoEra
Latest update Android YouTube
Home
React JS
ReactJS

Web Page with React Router | IndianTechnoEra

Create a simple web page, with navigation links for AboutUs page and ContactUs page. Implement the same using React Route concepts.

  

Web Page with React Router | IndianTechnoEra

Aim:

Create a simple web page, with navigation links for AboutUs page and ContactUs page. Implement the same using React Route concepts.

Component 1: index Part

index.js

import ReactDOM from 'react-dom/client'

import PageRoute from './PageRoute'; import './PageRoute.css'

const root = ReactDOM.createRoot(

document.getElementById('root'))

root.render(

  <>

    <PageRoute/>

  </>

)


Component 2: WebPage Part

PageRoute.js

import { BrowserRouter, Routes, Route } from "react-router-dom";

import Layout from "./Layout";

import Home from "./HomePage";

import ContactUs from "./ContactPage";

import AboutUs from "./AboutPage";

import NoPage from "./NoPage";

function PageRoute() {

    return (

        <BrowserRouter>

            <Routes>

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

                    <Route index element={<Home />} />

                    <Route path="aboutUs" 

                           element={<AboutUs />} />

                    <Route path="contact" 

                           element={<ContactUs />} />

                    <Route path="*" 

                           element={<NoPage />} />

                </Route>

            </Routes>

        </BrowserRouter>

    );

}

export default PageRoute;

Component 3: Layout Part

Layout.js

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

import './PageRouter.css'

const Layout = () => {

    return (

        <>

            <nav>

                <div className='top'>

                    <div className='topCenter'>

                        <ul className='topList'>

                            <li className='topListItem'>

                               <Link to="./" >Home</Link>

                            </li>

                            <li className='topListItem'>

                               <Link to="./aboutUs" >About</Link>

                            </li>

                            <li className='topListItem'>

                               <Link to="./contact" >Contact</Link>

                            </li>

                        </ul>

                    </div>

                </div>

            </nav>

            <Outlet />

        </>

    );

};

export default Layout;

Component 4: Home Page Part

HomePage.js

const Home = () => {

    return <>

        <div className="mainDiv">

            <h1>Home : JavaScript</h1>

            <div className="childDiv">

                <h3>What is JavaScript</h3>

                <p>

                    JavaScript (JS) is a lightweight, interpreted, or just-in-time compiled programming language with first-class functions. While it is most well-known as the scripting language for Web pages, many non-browser environments also use it, such as Node.js, Apache CouchDB and Adobe Acrobat. JavaScript is a prototype-based, multi-paradigm, single-threaded, dynamic language, supporting object-oriented, imperative, and declarative (e.g. functional programming) styles.

                </p>

                <h3>Advantages of JavaScript</h3>

                <li> Simple</li>

                <li> Speed</li>

                <li> Interoperability</li>

                <li> Server Load</li>

                <br />

 

                <h3>Disadvantages of JavaScript</h3>

                <li> Unexpected stop of rendering</li>

                <li> Client-side Security</li>

                <li> Inheritance </li>

                <li> Browser Support</li>

            </div>

        </div>


    </>;

};

export default Home;

Component 5: About Page Part

AboutPage.js

const AboutUs = () => {

    return (

        <div className="mainDiv">

            <h1>About : JavaScript</h1>

            <div className="childDiv">

                <h3>Brief history of JavaScript</h3>

                <p> JavaScript was invented by Brendan Eich in 1995. It was developed for Netscape 2, and became the ECMA-262 standard in 1997. After Netscape handed JavaScript over to ECMA, the Mozilla foundation continued to develop JavaScript for the Firefox browser. Mozilla's latest version was 1.8.5. (Identical to ES5). Internet Explorer (IE4) was the first browser to support ECMA-262 Edition 1 (ES1)

                </p>


                <h2>JavaScript ECMA Versions</h2>

                <li>1995        JavaScript was invented by Brendan Eich</li>

                <li>1996        Netscape 2 was released with JavaScript 1.0</li>

                <li>1997        JavaScript became an ECMA standard (ECMA-262)</li>

                <li>1998    ES2 ECMAScript 2 was released</li>

                <li>1999    ES3 ECMAScript 3 was released</li>

                <li>2008    ES4 ECMAScript 4 was abandoned</li>

                <li>2009    ES5 ECMAScript 5 was released</li>

                <li>2015    ES6 ECMAScript 6 was released</li>

                <li>2015    ES6 Full support for ES6 in Firefox 52</li>

                <li>2016    ES6 Full support for ES6 in Chrome 51, Opera 38, Edge 14 and  Safari 10</li>

                <li>2018    ES6 Full support for ES6 in all browsers **</li>

                <h2>About the Inventor</h2>


                <li>Brendan Eich is an American computer programmer and technology executive. </li>

                <li>Born: 4 July 1961 (age 61 years), Pittsburgh, Pennsylvania, United States</li>

                <li>Education: University of Illinois Urbana-Champaign, Santa Clara Univ...</li>

                <li>Spouse: Eleanor Eich</li>

                <li>Known for: Mozilla, Brave, JavaScript</li>

                <li>Nationality: American</li>

                <li>Web browsers: SpiderMonkey, Brave</li>

                <li>founded: Mozilla</li>


            </div>

        </div>

    );

};

export default AboutUs;

Component 6: Contact Page Part

ContactPage.js

const Contact = () => {

    return <>

        <div className="mainDiv">

            <h1>Contact : Brendan Eich </h1>

            <div className="childDiv">

                <h3> Email & Phone Number

                    CEO @ Brave Software</h3>

                <strong>LOCATION</strong><br />

                <li>San Francisco, California, United States</li>

                <br /><strong>Work</strong><br />

                <li>CEO @ Brave Software, Inc.</li>

                <li>CEO @ Mozilla</li>

                <li>CEO @ Mozilla</li>

 

                <br /><strong>EDUCATION</strong><br />

                <li>University Of Illinois At Urbana - Champaign

                    Master of Science (Computer Science)

                </li>

                <li>1983 - 1985 : Santa Clara University Bachelor of Science (Mathematics, Computer Science)

                </li>

                <li>1979 - 1983 : University of Illinois

                    Master of Science (Computer Science)

                </li>

                <br /><strong>SKILLS</strong><br />

                <li>JavaScript</li>

                <li>Open Source</li>

                <li>Scalability</li>

            </div>

        </div>


    </>;

};

export default Contact;

Component 7: Error Page Part

NoPage.js

import './PageRouter.css'

export default function Error404(){

    return(

        <>

            <div className="errorMain">

            <h2>Oops!404</h2>

            <p>Data Not Fount</p>

            </div>

        </>

    )

}



 

Component 8: CSS Part

PageRoute.css

* {margin: 0;

}

.top { width: 100%; height: 50px; background-color: rgb(0, 0, 0); position: sticky; top: 0; display: flex; align-items: center; font-family: 'Josefin Sans', sans-serif; z-index: 999; margin-bottom: 50px; justify-content: center; color: #fff;}

.topLeft,

.topRight { flex: 3; display: flex; align-items: center; justify-content: center;} 

.topCenter {flex: 6;} 

.topList { display: flex; justify-content: center; margin: 0; padding: 0; list-style: none;} 

.topListItem { margin-left: 20px; font-size: 25px; font-weight: 300; cursor: pointer; text-decoration: none; color: rebeccapurple;} 

.topListItem>a { font-weight: 600; text-decoration: none; color: #fff;} 

.topListItem>a:hover { transition: 2s; transition: cubic-bezier(0.075, 0.82, 0.165, 1); text-decoration: underline;} 

.mainDiv {margin: 0 50px;    width: 90%;} 

.childDiv {margin: 0 50px;} 

h1 {border-bottom: 2px dotted black;} 

.errorMain { display: flex; align-items: center; justify-content: center; text-align: center; flex-direction: column; height: calc(100%); width: 100%; position: absolute;}




Output:

Web Page with React Router | IndianTechnoEra
Web Page with React Router | IndianTechnoEra
#React JS #ReactJS #ReactJS Practical

Post a Comment

Feel free to ask your query...
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
More Details
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.