002-React Menu - Router

source:

https://www.geeksforgeeks.org/how-to-create-a-multi-page-website-using-react-js/

https://www.w3schools.com/react/react_router.asp

https://github.com/damilolaolatunji/portfolio-spa/blob/master/src/App.js

extra source: 

good to know: https://www.geeksforgeeks.org/reactjs-router/

 1) src/App.jsx

import React from 'react';

import ReactDOM from "react-dom/client";

import Navbar from "./components/Navbar/Navbar";

import {

    BrowserRouter as Router,

    Routes,

    Route,

} from "react-router-dom";

import About from "./pages/about";

import Blogs from "./pages/blogs";

import SignUp from "./pages/signup";

import Contact from "./pages/contact";

export default function App(){

    return (

        <Router>

            <Navbar />

            <Routes>

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

                <Route

                    path="/contact"

                    element={<Contact />}

                />

                <Route path="/blogs" element={<Blogs />} />

                <Route

                    path="/sign-up"

                    element={<SignUp />}

                />yo

        </Routes>

        </Router>

    );

}

2) src/components/Navbar/Navbar.jsx

// JavaScript source code

import React from "react";

import { Nav, NavLink, NavMenu } from "./NavbarElements";

const Navbar = () => {

    return (

        <>

            <Nav>

                <NavMenu>

                     <NavLink to="/about" activeStyle>

                        About

                    </NavLink>

                    <NavLink to="/contact" activeStyle>

                        Contact Us

                    </NavLink>

                    <NavLink to="/blogs" activeStyle>

                        Blogs

                    </NavLink>

                    <NavLink to="/sign-up" activeStyle>

                        Sign Up

                    </NavLink>

                </NavMenu>

            </Nav>

        </>

    );

}

export default Navbar;

3) src/components/Navbar/NavbarElements.js

import { FaBars } from "react-icons/fa";

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

import styled from "styled-components";

export const Nav = styled.nav`

    background: #ffb3ff;

    height: 85px;

    display: flex;

    justify-content: space-between;

    padding: 0.2rem calc((100vw - 1000px) / 2);

    z-index: 12;

`;

export const NavLink = styled(Link)`

    color: #808080;

    display: flex;

    align-items: center;

    text-decoration: none;

    padding: 0 1rem;

    height: 100%;

    cursor: pointer;

    &.active {

        color: #4d4dff;

    }

`;

export const Bars = styled(FaBars)`

    display: none;

    color: #808080;

    @media screen and (max-width: 768px) {

        display: block;

        position: absolute;

        top: 0;

        right: 0;

        transform: translate(-100%, 75%);

        font-size: 1.8rem;

        cursor: pointer;

    }

`;

export const NavMenu = styled.div`

    display: flex;

    align-items: center;

    margin-right: -24px;

    /* Second Nav */

    /* margin-right: 24px; */

    /* Third Nav */

    /* width: 100vw;

white-space: nowrap; */

    @media screen and (max-width: 768px) {

        display: none;

    }

`;

4) src/index.jsx

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App';

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

ReactDOM.render((

    <BrowserRouter>

        <App />

    </BrowserRouter>

), document.getElementById('root'));