Jason
/
safaribook-aspnet-core5-and-react
1
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Chap05 -> Implementing links -> Using the Link component

master
Jason Zhu 2022-03-29 16:22:23 +11:00
parent 353cb61006
commit 89ea270218
1 changed files with 9 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
QandA/frontend/src/Header.tsx
View File

@ -1,9 +1,10 @@
/** @jsxImportSource @emotion/react */ /** @jsxImportSource @emotion/react */
import { css } from '@emotion/react'; import { css } from '@emotion/react';
import { fontFamily, fontSize, gray1, gray2, gray5 } from './Styles';
import React from 'react'; import React from 'react';
import { Link } from 'react-router-dom';
import { UserIcon } from './Icons'; import { UserIcon } from './Icons';
import { fontFamily, fontSize, gray1, gray2, gray5 } from './Styles';
export const Header = () => { export const Header = () => {
const handleSearchInputChange = (e: React.ChangeEvent<HTMLInputElement>) => { const handleSearchInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@ -26,8 +27,8 @@ export const Header = () => {
box-shadow: 0 3px 7px 0 rgba(100, 112, 114, 0.21); box-shadow: 0 3px 7px 0 rgba(100, 112, 114, 0.21);
`} `}
> >
<a <Link
href="./" to="/"
css={css` css={css`
font-size: 24px; font-size: 24px;
font-weight: bold; font-weight: bold;
@ -36,7 +37,7 @@ export const Header = () => {
`} `}
> >
Q & A Q & A
</a> </Link>
<input <input
type="text" type="text"
placeholder="Search ..." placeholder="Search ..."
@ -57,8 +58,8 @@ export const Header = () => {
} }
`} `}
/> />
<a <Link
href="./signin" to="signin"
css={css` css={css`
font-family: ${fontFamily}; font-family: ${fontFamily};
font-size: ${fontSize}; font-size: ${fontSize};
@ -83,7 +84,7 @@ export const Header = () => {
> >
Sign In Sign In
</span> </span>
</a> </Link>
</div> </div>
); );
}; };