Description
In this Web Development tutorial we are going to learn about React Router by creating a Website wit 4 webpages (Homepage, )and also a navigation witch will navigate us to each on one the different web pages without reloading the website.
Useful links:
- MaterializeCSS – https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css
- Unsplash – https://source.unsplash.com/random
Content of this tutorial
What is React Router?
React Router is a collection of navigational components that compose declaratively with your application. Whether you want to have bookmarkable URLs for your web app or a composable way to navigate in React Native, React Router works wherever React is rendering!
How dos it work?
To get started with React Router in a web app, we first need a React web app with “npx create-react-app my-app”
need to have node.js and npm installed:
- npx create-react-app . “for creating the application in the same folder”
- npm install react-router-dom
- npm start to start the server
- React hooks used:
- useLocation
App.js Code:
import "./App.css";
import Nav from "./components/Nav";
// import Header from "./components/Header";
function App() {
return (
<div>
<Nav />
{/* <Header /> */}
</div>
);
}
export default App;
App.css Code:
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
:root {
--prim-c: #282c34;
}
.bg-prim {
background-color: var(--prim-c);
}
.title {
text-align: center;
padding: 1rem;
}
.brand-logo {
margin-left: 1rem;
}
.gallery {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 2rem;
max-width: 600px;
margin: auto;
}
.card-title {
color: var(--prim-c) !important;
}
.card-action {
background-color: var(--prim-c) !important;
}
.contact-form {
max-width: 400px;
margin: 10vh auto;
background-color: #282c34;
padding: 1rem;
}
.btn-block {
width: 100%;
}
header {
width: 600px;
margin: auto;
display: flex;
flex-direction: column;
justify-content: center;
}
footer {
position: fixed;
bottom: 0;
width: 100%;
color: #fff;
}
Component: Nav.js
import { BrowserRouter as Router, Route, Switch, Link } from "react-router-dom";
import About from "../pages/About";
import Portfolio from "../pages/Portfolio";
import Contact from "../pages/Contact";
import Home from "../pages/Home";
const Nav = () => {
return (
<Router>
<nav>
<div class="nav-wrapper bg-prim ">
<Link to="/" class="brand-logo left">
Norbert BM
</Link>
<ul id="nav-mobile" class="right ">
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/portfolio">Portfolio</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</div>
</nav>{" "}
{/* A <Switch> looks through its children <Route>s and
// renders the first one that matches the current URL. */}
<Switch>
<Route path="/" exact>
<Home />
</Route>
<Route path="/about">
<About />
<Home />
</Route>
<Route path="/portfolio">
<Portfolio />
<Home />
</Route>
<Route path="/Contact">
<Contact />
<Home />
</Route>
</Switch>
</Router>
);
};
export default Nav;
Component: Header.js
import React from "react";
import logo from "../logo.svg";
const Header = () => {
return (
<header>
<h1 className="title">
Welcome to <span className="App-link">React Router</span> Tutorial
</h1>
<img src={logo} className="App-logo " alt="logo" />
</header>
);
};
export default Header;
Component: Footer.js
import React from "react";
const Footer = () => {
return (
<footer className="title bg-prim">
Welcome to React Router Tutorial © Menyhart Media
</footer>
);
};
export default Footer;
Page: About.js
import React from "react";
const About = () => {
return (
<div style={{ maxWidth: "600px", margin: "auto" }}>
<h1 className="title">About</h1>
<ul>
<li>
<h3>What is it?</h3> React Router is a collection of navigational
components that compose declaratively with your application. Whether
you want to have bookmarkable URLs for your web app or a composable
way to navigate in React Native, React Router works wherever React is
rendering!
</li>
<li>
<h3>Quick Start</h3>
To get started with React Router in a web app, we need a React web app
with "npx create-react-app my-app"
</li>
<li>
<h3>Installation</h3>
We can now install React Router from the public npm registry with
either npm or yarn. Since we’re building a web app, we’ll use
react-router-dom in this tutorial. "npm install react-router-dom"
</li>
</ul>
</div>
);
};
export default About;Page: Portfolio.js
import React from "react";
const About = () => {
return (
import React from "react";
import { Link } from "react-router-dom";
const Portfolio = () => {
return (
<>
<h1 className="title">Portfolio</h1>
<div className="gallery">
<div className="card">
<div className="card-image">
<img src="https://source.unsplash.com/random" alt="" />
<span className="card-title">Card Title</span>
</div>
<div className="card-content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque,
doloremque.
</p>
</div>
<div className="card-action bg-prim">
<Link to="#">This is a link</Link>
</div>
</div>
<div className="card">
<div className="card-image">
<img src="https://source.unsplash.com/random" alt="" />
<span className="card-title">Card Title</span>
</div>
<div className="card-content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque,
doloremque.
</p>
</div>
<div className="card-action">
<Link to="#">This is a link</Link>
</div>
</div>
<div className="card">
<div className="card-image">
<img src="https://source.unsplash.com/random" alt="" />
<span className="card-title">Card Title</span>
</div>
<div classNameName="card-content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque,
doloremque.
</p>
</div>
<div className="card-action">
<Link to="#">This is a link</Link>
</div>
</div>
<div className="card">
<div className="card-image">
<img src="https://source.unsplash.com/random" alt="" />
<span className="card-title">Card Title</span>
</div>
<div className="card-content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque,
doloremque.
</p>
</div>
<div className="card-action">
<Link to="#">This is a link</Link>
</div>
</div>
</div>
</>
);
};
export default Portfolio;
Page: About.js
import React from "react";
const Contact = () => {
return (
<>
<h1 className="title">Contact Us</h1>
<form className="contact-form card ">
<label>First Name</label>
<input type="text" placeholder="Your name.." />
<label>Last Name</label>
<input type="text" placeholder="Your last name.." />
<label>Country</label>
<select id="country" name="country">
<option value="australia">Australia</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>
</select>
<label>Subject</label>
<textarea
placeholder="Write something.."
style={{ height: "200px", padding: "1rem" }}
></textarea>
<input className="btn red btn-block" type="submit" value="Submit" />
</form>
</>
);
};
export default Contact;Page: Home.js
React Hook used: “useLocatoion”
Def! The useLocation hook returns the location object that represents the current URL. You can think about it like a useState that returns a new location whenever the URL changes.
In our case we only want to show the footer when we are on any other page then the Home page. All we need to do is to
import React from "react";
import { useLocation } from "react-router-dom";
import Header from "../components/Header";
import Footer from "../components/Footer";
const Home = () => {
const location = useLocation();
return <>{location.pathname === "/" ? <Header /> : <Footer />}</>;
};
export default Home;
For more information about JavaScript get the Complete Modern JavaScript Course NOW and become a javascript developer
Modern JavaScript and NodeJS from Beginner to Advanced
Popular course:
