Skip to content
This repository was archived by the owner on Oct 17, 2025. It is now read-only.

Commit 5ab9005

Browse files
a01sa01toa01sa01to
committed
react-router-dom の Link を使う
1 parent f53696f commit 5ab9005

File tree

10 files changed

+17
-31
lines changed

10 files changed

+17
-31
lines changed

‎workspaces/app/src/features/book/components/BookCard.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { Suspense } from 'react';
2+
import { Link } from 'react-router-dom';
23
import { styled } from 'styled-components';
34

45
import { Flex } from '../../../foundation/components/Flex';
56
import { Image } from '../../../foundation/components/Image';
6-
import { Link } from '../../../foundation/components/Link';
77
import { Text } from '../../../foundation/components/Text';
88
import { useImage } from '../../../foundation/hooks/useImage';
99
import { Color, Radius, Space, Typography } from '../../../foundation/styles/variables';
@@ -43,7 +43,7 @@ const BookCard: React.FC<Props> = ({ bookId }) => {
4343
const authorImageUrl = useImage({ height: 32, imageId: book.author.image.id, width: 32 });
4444

4545
return (
46-
<_Wrapper href={`/books/${bookId}`}>
46+
<_Wrapper to={`/books/${bookId}`}>
4747
{imageUrl != null && (
4848
<_ImgWrapper>
4949
<Image alt={book.image.alt} height={128} objectFit="cover" src={imageUrl} width={192} />

‎workspaces/app/src/features/book/components/BookListItem.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1+
import { Link } from 'react-router-dom';
12
import styled from 'styled-components';
23

34
import { Box } from '../../../foundation/components/Box';
45
import { Flex } from '../../../foundation/components/Flex';
56
import { Image } from '../../../foundation/components/Image';
6-
import { Link } from '../../../foundation/components/Link';
77
import { Separator } from '../../../foundation/components/Separator';
88
import { Spacer } from '../../../foundation/components/Spacer';
99
import { Text } from '../../../foundation/components/Text';
@@ -38,7 +38,7 @@ export const BookListItem: React.FC<Props> = ({ bookId }) => {
3838

3939
return (
4040
<_Wrapper>
41-
<_Link href={`/books/${book.id}`}>
41+
<_Link to={`/books/${book.id}`}>
4242
<Spacer height={Space * 1.5} />
4343
<Flex align="flex-start" gap={Space * 2.5} justify="flex-start">
4444
{imageUrl != null && (

‎workspaces/app/src/features/episode/components/EpisodeListItem.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1+
import { Link } from 'react-router-dom';
12
import styled from 'styled-components';
23

34
import { Box } from '../../../foundation/components/Box';
45
import { Flex } from '../../../foundation/components/Flex';
56
import { Image } from '../../../foundation/components/Image';
6-
import { Link } from '../../../foundation/components/Link';
77
import { Separator } from '../../../foundation/components/Separator';
88
import { Spacer } from '../../../foundation/components/Spacer';
99
import { Text } from '../../../foundation/components/Text';
@@ -39,7 +39,7 @@ export const EpisodeListItem: React.FC<Props> = ({ bookId, episodeId }) => {
3939

4040
return (
4141
<_Wrapper>
42-
<_Link href={`/books/${bookId}/episodes/${episode.id}`}>
42+
<_Link to={`/books/${bookId}/episodes/${episode.id}`}>
4343
<Spacer height={Space * 1.5} />
4444
<Flex align="flex-start" gap={Space * 2.5} justify="flex-start">
4545
{imageUrl != null && (

‎workspaces/app/src/features/feature/components/FeatureCard.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { Suspense } from 'react';
2+
import { Link } from 'react-router-dom';
23
import { styled } from 'styled-components';
34

45
import { Flex } from '../../../foundation/components/Flex';
56
import { Image } from '../../../foundation/components/Image';
6-
import { Link } from '../../../foundation/components/Link';
77
import { Text } from '../../../foundation/components/Text';
88
import { useImage } from '../../../foundation/hooks/useImage';
99
import { Color, Radius, Space, Typography } from '../../../foundation/styles/variables';
@@ -54,7 +54,7 @@ const FeatureCard: React.FC<Props> = ({ bookId }) => {
5454
const authorImageUrl = useImage({ height: 32, imageId: book.author.image.id, width: 32 });
5555

5656
return (
57-
<_Wrapper href={`/books/${bookId}`}>
57+
<_Wrapper to={`/books/${bookId}`}>
5858
{imageUrl != null && (
5959
<_ImgWrapper>
6060
<Image alt={book.image.alt} height={96} objectFit="cover" src={imageUrl} width={96} />

‎workspaces/app/src/features/ranking/components/RankingCard.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import { NavigateNext } from '@mui/icons-material';
22
import { Suspense } from 'react';
3+
import { Link } from 'react-router-dom';
34
import styled from 'styled-components';
45

56
import { Box } from '../../../foundation/components/Box';
67
import { Flex } from '../../../foundation/components/Flex';
78
import { Image } from '../../../foundation/components/Image';
8-
import { Link } from '../../../foundation/components/Link';
99
import { Separator } from '../../../foundation/components/Separator';
1010
import { Spacer } from '../../../foundation/components/Spacer';
1111
import { Text } from '../../../foundation/components/Text';
@@ -49,7 +49,7 @@ const RankingCard: React.FC<Props> = ({ bookId }) => {
4949

5050
return (
5151
<_Wrapper>
52-
<_Link href={`/books/${book.id}`}>
52+
<_Link to={`/books/${book.id}`}>
5353
<Spacer height={Space * 1.5} />
5454
<Flex align="flex-start" gap={Space * 2.5} justify="flex-start">
5555
{imageUrl != null && (

‎workspaces/app/src/foundation/components/Link.tsx‎

Lines changed: 0 additions & 12 deletions
This file was deleted.

‎workspaces/app/src/pages/BookDetailPage/index.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useAtom } from 'jotai/react';
22
import { Suspense, useCallback } from 'react';
3-
import { useParams } from 'react-router-dom';
3+
import { Link, useParams } from 'react-router-dom';
44
import type { RouteParams } from 'regexparam';
55
import { styled } from 'styled-components';
66
import invariant from 'tiny-invariant';
@@ -12,7 +12,6 @@ import { useEpisodeList } from '../../features/episode/hooks/useEpisodeList';
1212
import { Box } from '../../foundation/components/Box';
1313
import { Flex } from '../../foundation/components/Flex';
1414
import { Image } from '../../foundation/components/Image';
15-
import { Link } from '../../foundation/components/Link';
1615
import { Separator } from '../../foundation/components/Separator';
1716
import { Spacer } from '../../foundation/components/Spacer';
1817
import { Text } from '../../foundation/components/Text';
@@ -82,7 +81,7 @@ const BookDetailPage: React.FC = () => {
8281

8382
<Spacer height={Space * 1} />
8483

85-
<_AuthorWrapper href={`/authors/${book.author.id}`}>
84+
<_AuthorWrapper to={`/authors/${book.author.id}`}>
8685
{auhtorImageUrl != null && (
8786
<_AvatarWrapper>
8887
<Image alt={book.author.name} height={32} objectFit="cover" src={auhtorImageUrl} width={32} />

‎workspaces/app/src/pages/BookDetailPage/internal/BottomNavigator.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { animated, useSpring } from '@react-spring/web';
22
import { useCallback } from 'react';
3+
import { Link } from 'react-router-dom';
34
import { styled } from 'styled-components';
45

5-
import { Link } from '../../../foundation/components/Link';
66
import { Color, Radius, Space } from '../../../foundation/styles/variables';
77

88
import { FavButton } from './FavButton';

‎workspaces/app/src/pages/TopPage/internal/CoverSection.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Search } from '@mui/icons-material';
2+
import { Link } from 'react-router-dom';
23
import styled from 'styled-components';
34

4-
import { Link } from '../../../foundation/components/Link';
55
import { Text } from '../../../foundation/components/Text';
66
import { Color, Radius, Space, Typography } from '../../../foundation/styles/variables';
77

@@ -33,7 +33,7 @@ export const CoverSection: React.FC = () => {
3333
return (
3434
<_Wrapper>
3535
<HeroImage />
36-
<_SearchLink href="/search">
36+
<_SearchLink to="/search">
3737
<Search style={{ color: Color.MONO_A, height: 24, width: 24 }} />
3838
<Text color={Color.MONO_A} typography={Typography.NORMAL16}>
3939
検索

‎workspaces/app/src/routes.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import { ArrowBack } from '@mui/icons-material';
22
import React from 'react';
3-
import { Route, Routes } from 'react-router-dom';
3+
import { Link, Route, Routes } from 'react-router-dom';
44
import { styled } from 'styled-components';
55

6-
import { Link } from './foundation/components/Link';
76
import { Text } from './foundation/components/Text';
87
import { ActionLayout } from './foundation/layouts/ActionLayout';
98
import { CommonLayout } from './foundation/layouts/CommonLayout';
@@ -33,7 +32,7 @@ export const Router: React.FC = () => {
3332
element={
3433
<ActionLayout
3534
leftContent={
36-
<_BackToTopButton href={'/'}>
35+
<_BackToTopButton to={'/'}>
3736
<ArrowBack style={{ color: Color.MONO_100, height: 32, width: 32 }} />
3837
<Text color={Color.MONO_100} typography={Typography.NORMAL16} weight="bold">
3938
トップへ戻る

0 commit comments

Comments
 (0)