Use Link components instead of anchor tags

This commit is contained in:
Jan Tuomi
2018-11-19 20:14:03 +02:00
parent 33b5b91392
commit 7e1e62e064
8 changed files with 33 additions and 26 deletions
+6 -5
View File
@@ -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>
<a href="/palaute">Palaute</a>
<a href="/arkisto">Arkisto</a>
<a href="/materiaalipankki">Materiaalipankki</a>
<Link to="/jaseneksi">Jäseneksi</Link>
<Link to="/palaute">Palaute</Link>
<Link to="/arkisto">Arkisto</Link>
<Link to="/materiaalipankki">Materiaalipankki</Link>
</div>
</div>
</div>
+4 -3
View File
@@ -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
href={link}
<Link
to={link}
className="so-me-icon"
onClick={onClick}
>
{elem}
</a>
</Link>
);
} else {
return (
@@ -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"
href={this.props.to}>
<Link className="navbar-child-link"
to={this.props.to}>
{this.props.children}
</a>
</Link>
);
}
}
@@ -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"
href={this.props.to}
>{text}</a>
<Link className="navbar-dropdown-link"
to={this.props.to}
>{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"
href={to}
<Link className="navbar-dropdown-link"
to={to}
onMouseEnter={this.handleMouseEnterLink}
onMouseLeave={this.handleMouseLeaveLink}
>{text}</a>
>{text}</Link>
<DropDownBox
onMouseEnter={this.handleMouseEnterBox}
onMouseLeave={this.handleMouseLeaveBox}
+2 -1
View File
@@ -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>
);
}
+7 -6
View File
@@ -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>
<a href="#"><img src="https://placehold.it/200x200" /></a>
<a href="#"><img src="https://placehold.it/200x200" /></a>
<a href="#"><img src="https://placehold.it/200x200" /></a>
<a href="#"><img src="https://placehold.it/200x200" /></a>
<Link to="#"><img src="https://placehold.it/200x200" /></Link>
<Link to="#"><img src="https://placehold.it/200x200" /></Link>
<Link to="#"><img src="https://placehold.it/200x200" /></Link>
<Link to="#"><img src="https://placehold.it/200x200" /></Link>
<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>
);
}
+2 -1
View File
@@ -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>
+1 -1
View File
@@ -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";