Use Link components instead of anchor tags

src/components/Footer/Footer.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { Link } from "react-router-dom";
 import FooterMap from "../FooterMap/FooterMap";
 import "./Footer.scss";
 
@@ -22,13 +23,13 @@ class Footer extends React.Component<FooterProps, FooterState> {
                   <br></br>
                   <p>Y-tunnus: 1627010-1</p>
                   <p>sik-hallitus@list.ayy.fi</p>
-                  <a href="/yhteystiedot">Yhteystiedot</a>
+                  <Link to="/yhteystiedot">Yhteystiedot</Link>
                 </div>
                 <div className="footer__links">
-                  <a href="/jaseneksi">Jäseneksi</a>
+                  <Link to="/jaseneksi">Jäseneksi</Link>
-                  <a href="/palaute">Palaute</a>
+                  <Link to="/palaute">Palaute</Link>
-                  <a href="/arkisto">Arkisto</a>
+                  <Link to="/arkisto">Arkisto</Link>
-                  <a href="/materiaalipankki">Materiaalipankki</a>
+                  <Link to="/materiaalipankki">Materiaalipankki</Link>
                 </div>
               </div>
             </div>

src/components/Icon/Icon.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { Link } from "react-router-dom";
 import "./Icon.scss";
 
 export enum IconType {
@@ -62,13 +63,13 @@ class Icon extends React.Component<IconProps, IconState> {
     const elem = nameToIcon(name);
     if (link) {
       return (
-        <a
+        <Link
-          href={link}
+          to={link}
           className="so-me-icon"
           onClick={onClick}
         >
           {elem}
-        </a>
+        </Link>
       );
     } else {
       return (

src/components/NavbarChildLink/NavbarChildLink.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { Link } from "react-router-dom";
 import "./NavbarChildLink.scss";
 
 export interface NavbarChildLinkProps {
@@ -11,10 +12,10 @@ export interface NavbarChildLinkState {
 class NavbarChildLink extends React.Component<NavbarChildLinkProps, NavbarChildLinkState> {
   render() {
     return (
-      <a className="navbar-child-link"
+      <Link className="navbar-child-link"
-        href={this.props.to}>
+        to={this.props.to}>
         {this.props.children}
-      </a>
+      </Link>
     );
   }
 }

src/components/NavbarDropdownLink/NavbarDropdownLink.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { Link } from "react-router-dom";
 import "./NavbarDropdownLink.scss";
 import { Fragment } from "react";
 import DropDownBox from "../DropDownBox/DropDownBox";
@@ -55,9 +56,9 @@ class NavbarDropdownLink extends React.Component<NavbarDropdownLinkProps, Navbar
     if (exploded) {
       return (
         <Fragment>
-          <a className="navbar-dropdown-link"
+          <Link className="navbar-dropdown-link"
-            href={this.props.to}
+            to={this.props.to}
-          >{text}</a>
+          >{text}</Link>
           {children}
         </Fragment>
       );
@@ -65,11 +66,11 @@ class NavbarDropdownLink extends React.Component<NavbarDropdownLinkProps, Navbar
 
     return (
       <div className="navbar-dropdown-container">
-        <a className="navbar-dropdown-link"
+        <Link className="navbar-dropdown-link"
-          href={to}
+          to={to}
           onMouseEnter={this.handleMouseEnterLink}
           onMouseLeave={this.handleMouseLeaveLink}
-        >{text}</a>
+        >{text}</Link>
         <DropDownBox
           onMouseEnter={this.handleMouseEnterBox}
           onMouseLeave={this.handleMouseLeaveBox}

src/components/PageLink/PageLink.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { Link } from "react-router-dom";
 import "./PageLink.scss";
 
 export interface PageLinkProps {
@@ -13,7 +14,7 @@ class PageLink extends React.Component<PageLinkProps, PageLinkState> {
     return (
       <div className="page-link">
         <p>{this.props.children}</p>
-        <a href={to}>{desc}</a>
+        <Link to={to}>{desc}</Link>
       </div>
     );
   }

src/components/SponsorReel/SponsorReel.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { Link } from "react-router-dom";
 import "./SponsorReel.scss";
 
 export interface SponsorReelProps {}
@@ -10,13 +11,13 @@ class SponsorReel extends React.Component<SponsorReelProps, SponsorReelState> {
       <div className="sponsor-reel">
         <h3>Yhteistyössä</h3>
         <div className="sponsor-reel-logos">
-          <a href="#"><img src="https://placehold.it/200x200" /></a>
+          <Link to="#"><img src="https://placehold.it/200x200" /></Link>
-          <a href="#"><img src="https://placehold.it/200x200" /></a>
+          <Link to="#"><img src="https://placehold.it/200x200" /></Link>
-          <a href="#"><img src="https://placehold.it/200x200" /></a>
+          <Link to="#"><img src="https://placehold.it/200x200" /></Link>
-          <a href="#"><img src="https://placehold.it/200x200" /></a>
+          <Link to="#"><img src="https://placehold.it/200x200" /></Link>
-          <a href="#"><img src="https://placehold.it/200x200" /></a>
+          <Link to="#"><img src="https://placehold.it/200x200" /></Link>
         </div>
-        <a href="/yritysyhteistyo">Haluatko kuulla lisää yhteistyöstä kanssamme?</a>
+        <Link to="/yritysyhteistyo">Haluatko kuulla lisää yhteistyöstä kanssamme?</Link>
       </div>
     );
   }

src/pages/FrontPage/FrontPage.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { Link } from "react-router-dom";
 import "./FrontPage.scss";
 import appStore from "../../stores/AppStore";
 import Card from "../../components/Card";
@@ -121,7 +122,7 @@ class FrontPage extends React.Component<FrontPageProps, FrontPageState> {
         <PageSection backgroundColor={PageSectionColor.Orange}>
           <Ribbon>
             <p>Sössöä vuodesta 1969.</p>
-            <a href="https://sosso.fi">Lue opiskelijalehden viimeisin numero&nbsp;›</a>
+            <Link to="https://sosso.fi">Lue opiskelijalehden viimeisin numero&nbsp;›</Link>
           </Ribbon>
         </PageSection>
         <PageSection backgroundColor={PageSectionColor.White} bottomBorder cardSection>

src/routes.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Fragment } from "react";
-import { Switch, Route } from "react-router-dom";
+import { Switch, Route, DefaultRoute } from "react-router-dom";
 import Helmet from "react-helmet";
 import FrontPage from "./pages/FrontPage";
 import NotFoundPage from "./pages/NotFoundPage";