r-freeman/portfolio
1
0
Fork 0
mirror of https://github.com/r-freeman/portfolio.git synced 2024-11-22 22:55:41 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fixed router issue

Browse Source
This commit is contained in:
r-freeman 2023-02-23 21:22:50 +00:00
parent a8ec09d5f7
commit 18f30724d9
3 changed files with 9 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components/Header.tsx
View File

@ -1,4 +1,4 @@
import {usePathname} from 'next/navigation' import {useRouter} from 'next/router'
import {useEffect, useRef} from 'react' import {useEffect, useRef} from 'react'
import {Container} from './Container' import {Container} from './Container'
import {MobileNavigation, DesktopNavigation} from './ui/Navigation' import {MobileNavigation, DesktopNavigation} from './ui/Navigation'
@ -50,7 +50,8 @@ function clamp(num: number, a: number, b: number) {
} }
export function Header() { export function Header() {
const isHomePage = usePathname() === '/' const router = useRouter()
const isHomePage = router.pathname === '/'
const headerRef = useRef<HTMLDivElement>(null) const headerRef = useRef<HTMLDivElement>(null)
const avatarRef = useRef<HTMLImageElement>(null) const avatarRef = useRef<HTMLImageElement>(null)

9
components/layouts/ArticleLayout.tsx
View File

@ -1,12 +1,11 @@
import React, {ReactNode} from 'react' import React, {ReactNode} from 'react'
import Head from 'next/head' import Head from 'next/head'
import {usePathname} from 'next/navigation' import Link from 'next/link'
import {Container} from '@/components/Container' import {Container} from '@/components/Container'
import {Prose} from '@/components/ui/Prose' import {Prose} from '@/components/ui/Prose'
import {Views} from '@/components/ui/Views' import {Views} from '@/components/ui/Views'
import {ArrowDownIcon} from '@/components/icons/ArrowDownIcon' import {ArrowDownIcon} from '@/components/icons/ArrowDownIcon'
import {formatDate} from '@/lib/formatDate' import {formatDate} from '@/lib/formatDate'
import Link from 'next/link'
type ArticleLayout = { type ArticleLayout = {
children?: ReactNode children?: ReactNode
@ -27,8 +26,6 @@ export function ArticleLayout({
date, date,
slug slug
}: ArticleLayout) { }: ArticleLayout) {
const pathname = usePathname()
if (isRssFeed) { if (isRssFeed) {
return children return children
} }
@ -40,7 +37,7 @@ export function ArticleLayout({
<meta name="description" content={description}/> <meta name="description" content={description}/>
<meta <meta
property="og:url" property="og:url"
content={`${process.env.NEXT_PUBLIC_SITE_URL}${pathname}`} content={`${process.env.NEXT_PUBLIC_SITE_URL}/writing/${slug}`}
/> />
<meta <meta
property="og:type" property="og:type"
@ -76,7 +73,7 @@ export function ArticleLayout({
/> />
<meta <meta
property="twitter:url" property="twitter:url"
content={`${process.env.NEXT_PUBLIC_SITE_URL}${pathname}`} content={`${process.env.NEXT_PUBLIC_SITE_URL}/writing/${slug}`}
/> />
<meta <meta
name="twitter:title" name="twitter:title"

5
components/ui/Navigation.tsx
View File

@ -1,5 +1,5 @@
import React, {Fragment, ReactNode} from 'react' import React, {Fragment, ReactNode} from 'react'
import {usePathname} from 'next/navigation' import {useRouter} from 'next/router'
import {Popover, Transition} from '@headlessui/react' import {Popover, Transition} from '@headlessui/react'
import clsx from 'clsx' import clsx from 'clsx'
import Link from 'next/link' import Link from 'next/link'
@ -76,7 +76,8 @@ export function MobileNavigation(props: Props) {
} }
function NavItem({href, children}: { href: string } & Props) { function NavItem({href, children}: { href: string } & Props) {
let isActive = usePathname() === href const router = useRouter()
let isActive = router.pathname === href
return ( return (
<li> <li>