added routing to buttons

Author: theAnaKen

src/App.js

@@ -51,8 +51,9 @@ function App() {
 				<Alert alert={alert} />
 				<div className="container my-3">
 					<Routes>
-						<Route path="/about" element={<About />} />
+						<Route exact path="/about" element={<About />} />
 						<Route
+							exact
 							path="/"
 							element={
 								<TextForm

src/componets/Navbar.js

@@ -1,5 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
+import { Link } from "react-router-dom";
 
 Navbar.propTypes = {
 	title: PropTypes.string.isRequired,
@@ -16,9 +17,9 @@ export default function Navbar(props) {
 		<nav
 			className={`navbar navbar-expand-lg navbar-${props.mode} bg-${props.mode}`}>
 			<div className="container-fluid">
-				<a className="navbar-brand" href="/">
+				<Link className="navbar-brand" to="/">
 					{props.title}
-				</a>
+				</Link>
 				<button
 					className="navbar-toggler"
 					type="button"
@@ -34,17 +35,17 @@ export default function Navbar(props) {
 					id="navbarSupportedContent">
 					<ul className="navbar-nav me-auto mb-2 mb-lg-0">
 						<li className="nav-item">
-							<a
+							<Link
 								className="nav-link active"
 								aria-current="page"
-								href="/">
+								to="/">
 								Home
-							</a>
+							</Link>
 						</li>
 						<li className="nav-item">
-							<a className="nav-link" href="/">
+							<Link className="nav-link" to="/about">
 								{props.aboutText}
-							</a>
+							</Link>
 						</li>
 					</ul>
 					<div