react-router-dom の Link を使う

a01sa01to · Mar 23, 2024 · 5ab9005 · 5ab9005
1 parent f53696f
commit 5ab9005
Show file tree

Hide file tree

Showing 10 changed files with 17 additions and 31 deletions.
diff --git a/workspaces/app/src/features/book/components/BookCard.tsx b/workspaces/app/src/features/book/components/BookCard.tsx
@@ -1,9 +1,9 @@
 import { Suspense } from 'react';
+import { Link } from 'react-router-dom';
 import { styled } from 'styled-components';
 
 import { Flex } from '../../../foundation/components/Flex';
 import { Image } from '../../../foundation/components/Image';
-import { Link } from '../../../foundation/components/Link';
 import { Text } from '../../../foundation/components/Text';
 import { useImage } from '../../../foundation/hooks/useImage';
 import { Color, Radius, Space, Typography } from '../../../foundation/styles/variables';
@@ -43,7 +43,7 @@ const BookCard: React.FC<Props> = ({ bookId }) => {
   const authorImageUrl = useImage({ height: 32, imageId: book.author.image.id, width: 32 });
 
   return (
-    <_Wrapper href={`/books/${bookId}`}>
+    <_Wrapper to={`/books/${bookId}`}>
       {imageUrl != null && (
         <_ImgWrapper>
           <Image alt={book.image.alt} height={128} objectFit="cover" src={imageUrl} width={192} />

diff --git a/workspaces/app/src/features/book/components/BookListItem.tsx b/workspaces/app/src/features/book/components/BookListItem.tsx
@@ -1,9 +1,9 @@
+import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 
 import { Box } from '../../../foundation/components/Box';
 import { Flex } from '../../../foundation/components/Flex';
 import { Image } from '../../../foundation/components/Image';
-import { Link } from '../../../foundation/components/Link';
 import { Separator } from '../../../foundation/components/Separator';
 import { Spacer } from '../../../foundation/components/Spacer';
 import { Text } from '../../../foundation/components/Text';
@@ -38,7 +38,7 @@ export const BookListItem: React.FC<Props> = ({ bookId }) => {
 
   return (
     <_Wrapper>
-      <_Link href={`/books/${book.id}`}>
+      <_Link to={`/books/${book.id}`}>
         <Spacer height={Space * 1.5} />
         <Flex align="flex-start" gap={Space * 2.5} justify="flex-start">
           {imageUrl != null && (

diff --git a/workspaces/app/src/features/episode/components/EpisodeListItem.tsx b/workspaces/app/src/features/episode/components/EpisodeListItem.tsx
@@ -1,9 +1,9 @@
+import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 
 import { Box } from '../../../foundation/components/Box';
 import { Flex } from '../../../foundation/components/Flex';
 import { Image } from '../../../foundation/components/Image';
-import { Link } from '../../../foundation/components/Link';
 import { Separator } from '../../../foundation/components/Separator';
 import { Spacer } from '../../../foundation/components/Spacer';
 import { Text } from '../../../foundation/components/Text';
@@ -39,7 +39,7 @@ export const EpisodeListItem: React.FC<Props> = ({ bookId, episodeId }) => {
 
   return (
     <_Wrapper>
-      <_Link href={`/books/${bookId}/episodes/${episode.id}`}>
+      <_Link to={`/books/${bookId}/episodes/${episode.id}`}>
         <Spacer height={Space * 1.5} />
         <Flex align="flex-start" gap={Space * 2.5} justify="flex-start">
           {imageUrl != null && (

diff --git a/workspaces/app/src/features/feature/components/FeatureCard.tsx b/workspaces/app/src/features/feature/components/FeatureCard.tsx
@@ -1,9 +1,9 @@
 import { Suspense } from 'react';
+import { Link } from 'react-router-dom';
 import { styled } from 'styled-components';
 
 import { Flex } from '../../../foundation/components/Flex';
 import { Image } from '../../../foundation/components/Image';
-import { Link } from '../../../foundation/components/Link';
 import { Text } from '../../../foundation/components/Text';
 import { useImage } from '../../../foundation/hooks/useImage';
 import { Color, Radius, Space, Typography } from '../../../foundation/styles/variables';
@@ -54,7 +54,7 @@ const FeatureCard: React.FC<Props> = ({ bookId }) => {
   const authorImageUrl = useImage({ height: 32, imageId: book.author.image.id, width: 32 });
 
   return (
-    <_Wrapper href={`/books/${bookId}`}>
+    <_Wrapper to={`/books/${bookId}`}>
       {imageUrl != null && (
         <_ImgWrapper>
           <Image alt={book.image.alt} height={96} objectFit="cover" src={imageUrl} width={96} />

diff --git a/workspaces/app/src/features/ranking/components/RankingCard.tsx b/workspaces/app/src/features/ranking/components/RankingCard.tsx
@@ -1,11 +1,11 @@
 import { NavigateNext } from '@mui/icons-material';
 import { Suspense } from 'react';
+import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 
 import { Box } from '../../../foundation/components/Box';
 import { Flex } from '../../../foundation/components/Flex';
 import { Image } from '../../../foundation/components/Image';
-import { Link } from '../../../foundation/components/Link';
 import { Separator } from '../../../foundation/components/Separator';
 import { Spacer } from '../../../foundation/components/Spacer';
 import { Text } from '../../../foundation/components/Text';
@@ -49,7 +49,7 @@ const RankingCard: React.FC<Props> = ({ bookId }) => {
 
   return (
     <_Wrapper>
-      <_Link href={`/books/${book.id}`}>
+      <_Link to={`/books/${book.id}`}>
         <Spacer height={Space * 1.5} />
         <Flex align="flex-start" gap={Space * 2.5} justify="flex-start">
           {imageUrl != null && (

diff --git a/workspaces/app/src/foundation/components/Link.tsx b/workspaces/app/src/foundation/components/Link.tsx
diff --git a/workspaces/app/src/pages/BookDetailPage/index.tsx b/workspaces/app/src/pages/BookDetailPage/index.tsx
@@ -1,6 +1,6 @@
 import { useAtom } from 'jotai/react';
 import { Suspense, useCallback } from 'react';
-import { useParams } from 'react-router-dom';
+import { Link, useParams } from 'react-router-dom';
 import type { RouteParams } from 'regexparam';
 import { styled } from 'styled-components';
 import invariant from 'tiny-invariant';
@@ -12,7 +12,6 @@ import { useEpisodeList } from '../../features/episode/hooks/useEpisodeList';
 import { Box } from '../../foundation/components/Box';
 import { Flex } from '../../foundation/components/Flex';
 import { Image } from '../../foundation/components/Image';
-import { Link } from '../../foundation/components/Link';
 import { Separator } from '../../foundation/components/Separator';
 import { Spacer } from '../../foundation/components/Spacer';
 import { Text } from '../../foundation/components/Text';
@@ -82,7 +81,7 @@ const BookDetailPage: React.FC = () => {
 
           <Spacer height={Space * 1} />
 
-          <_AuthorWrapper href={`/authors/${book.author.id}`}>
+          <_AuthorWrapper to={`/authors/${book.author.id}`}>
             {auhtorImageUrl != null && (
               <_AvatarWrapper>
                 <Image alt={book.author.name} height={32} objectFit="cover" src={auhtorImageUrl} width={32} />

diff --git a/workspaces/app/src/pages/BookDetailPage/internal/BottomNavigator.tsx b/workspaces/app/src/pages/BookDetailPage/internal/BottomNavigator.tsx
@@ -1,8 +1,8 @@
 import { animated, useSpring } from '@react-spring/web';
 import { useCallback } from 'react';
+import { Link } from 'react-router-dom';
 import { styled } from 'styled-components';
 
-import { Link } from '../../../foundation/components/Link';
 import { Color, Radius, Space } from '../../../foundation/styles/variables';
 
 import { FavButton } from './FavButton';

diff --git a/workspaces/app/src/pages/TopPage/internal/CoverSection.tsx b/workspaces/app/src/pages/TopPage/internal/CoverSection.tsx
@@ -1,7 +1,7 @@
 import { Search } from '@mui/icons-material';
+import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 
-import { Link } from '../../../foundation/components/Link';
 import { Text } from '../../../foundation/components/Text';
 import { Color, Radius, Space, Typography } from '../../../foundation/styles/variables';
 
@@ -33,7 +33,7 @@ export const CoverSection: React.FC = () => {
   return (
     <_Wrapper>
       <HeroImage />
-      <_SearchLink href="/search">
+      <_SearchLink to="/search">
         <Search style={{ color: Color.MONO_A, height: 24, width: 24 }} />
         <Text color={Color.MONO_A} typography={Typography.NORMAL16}>
           検索

diff --git a/workspaces/app/src/routes.tsx b/workspaces/app/src/routes.tsx
@@ -1,9 +1,8 @@
 import { ArrowBack } from '@mui/icons-material';
 import React from 'react';
-import { Route, Routes } from 'react-router-dom';
+import { Link, Route, Routes } from 'react-router-dom';
 import { styled } from 'styled-components';
 
-import { Link } from './foundation/components/Link';
 import { Text } from './foundation/components/Text';
 import { ActionLayout } from './foundation/layouts/ActionLayout';
 import { CommonLayout } from './foundation/layouts/CommonLayout';
@@ -33,7 +32,7 @@ export const Router: React.FC = () => {
         element={
           <ActionLayout
             leftContent={
-              <_BackToTopButton href={'/'}>
+              <_BackToTopButton to={'/'}>
                 <ArrowBack style={{ color: Color.MONO_100, height: 32, width: 32 }} />
                 <Text color={Color.MONO_100} typography={Typography.NORMAL16} weight="bold">
                   トップへ戻る