[TIL 5日目]

ルート

ルーティングとサーバからクライアントにロードするURLをロードします.

スタティツクルーティング(スタティツクルーター)

next/routerの使用

import { useRouter } from 'next/router'

export default function StaticRoutingPage() {
  const router = useRouter()

  function onClickMove() {
    router.push('/05-02-static-routed')
  }
  
  return (
  <button onClick={onClickMove}>페이지 이동하기</button>
  )
}

const router = useRouter()

router.push('이동할 페이지')

reloae(), replace(),

pathname:今私の住所を教えてあげます

import { useRouter } from 'next/router'

export default function StaticRoutingNumberPage() {
  const router = useRouter()

  function onClickMove1() {
    router.push('/05-04-static-routed-number/1')
  }

  function onClickMove2() {
    router.push('/05-04-static-routed-number/2')
  }

  function onClickMove3() {
    router.push('/05-04-static-routed-number/3')
  }
  
  return (
    <>
      <button onClick={onClickMove1}>1번 게시글</button>
      <button onClick={onClickMove2}>2번 게시글</button>
      <button onClick={onClickMove3}>3번 게시글</button>
    </>
  )
}

投稿が多ければ多いほど、フォルダが多くなります.これは非効率的な方法です.

ダイナミックルーター

パケットアプリケーション(SPA)でルーティング

以前はサーバからそのURLに関するデータを受信していましたが、現在は大きなアプリケーションを受信し、クライアント(ブラウザ)でそのURLに基づいて何を表示するかを決定しています.
->アプリケーションを一度に受信して内部で実行

ブラウザが最初に要求するルート

ダウンロード

reace webappと

でダウンロードしたreac appには、ルートパスに合致するコンポーネントが表示されます.

応答アプリケーション上で別のページにジャンプする操作が実行される場合、

.

の新しいパスに一致する構成部品が表示されます.

next/router

[폴더이름]を使用して、変数形式のフォルダを作成します.
http://localhost:3000/boards/[フォルダ名]

import { useRouter } from 'next/router'

export default function DynamicRoutingNumberPage() {
  const router = useRouter()

  router.query = {
   
  }

  function onClickMove1() {
    router.push('/05-06-dynamic-routed-number/1')
  }
  function onClickMove2() {
    router.push('/05-06-dynamic-routed-number/2')
  }
  function onClickMove3() {
    router.push('/05-06-dynamic-routed-number/3')
  }
  
  return (
    <>
      <button onClick={onClickMove1}>1번 게시글</button>
      <button onClick={onClickMove2}>2번 게시글</button>
      <button onClick={onClickMove3}>3번 게시글</button>
    </>
  )
}

import { useRouter } from "next/router"

export default function DynamicRoutedNumberPage() {
  const router = useRouter()

  return (
    <div>{router.query.number}번 게시글 이동완료</div>
  )
}

react-router

reactは、構成部品を作成およびレンダリングし、react-routerライブラリを使用してルーティングを実行する必要があります.最も代表的なのはルーティング用のパッケージでありcraに内蔵されているパッケージではないためreact-routerを使用するにはインストールが必要です.

npm i react-router-dom

特定のパスに表示する構成部品を準備します.

import { BrowserRouter, Route } from "react-router-dom"
import Home from "./pages/Home"

export default function App() {
  return(
	<BrowserRouter>
		<Route path="/" componenet={Home} />
	</BrowserRouter>
    )
}

app.jsでは、下部に戻るRouteエレメントにドメインパスとコンポーネントを設定します.
これをBrowserFouterとしてカプセル化し、ブラウザが要求したパスにRouteのパスが含まれている場合に表示します.
ここにいたら.

<BrowserRouter>
	<Route path="/" componenet={Home} />
  	<Route path="/profile" componenet={Profile} />
</BrowserRouter>

2つの構成部品がある場合、/profileを使用してprofile構成部品をロードすると、ホームとProfile構成部品が同時に表示されます.これは、ホームのパスが「/」であるため、profileのパス「/profile」に含まれます.
正確に修正するには、パスに完全に一致するように構成部品をロードするように設定するだけです.

<BrowserRouter>
	<Route path="/" exact componenet={Home} />
  	<Route path="/profile" exact componenet={Profile} />
</BrowserRouter>

<BrowserRouter>
	<Route path="/" exact componenet={Home} />
  	<Route path="/profile" exact componenet={Profile} />
  	<Route path="/profile/:id" componenet={Profile} />
</BrowserRouter>

export default function Profile(props) {
  const id = props.match.params.id
  	return 
  	<div>
      <h2>프로필페이지입니다.</h2>
      { id && <p>id는 {id} 입니다.</p>}
  	</div>
}

クエリー文字列

<BrowserRouter>
	<Route path="/" exact componenet={Home} />
  	<Route path="/profile" exact componenet={Profile} />
  	<Route path="/profile/:id" componenet={Profile} />
  	<Route path="/about" exact componenet={About} />
</BrowserRouter>

export default function About(props) {
  const searchParams = props.location.search
  const obj = new URLSearchParams(searchParams)
  const name = obj.get("name")
  	return 
  	<div>
    	<h2>About 페이지입니다.</h2>
  		{name && <p>는 이름은 {name} 입니다.</p>}
  	</div>
}

->URLSearchParamsはkeyで直接取り出して書き込むことができず、ブラウザのサポートを受けない可能性があります.したがって、query-stringを受信して使用することが望ましい.
query-stringの使用

npm i query-string

import queryString from 'query-string'

export default function About(props) {
  const searchParams = props.location.search
  const query = queryString.parse(searchParms)
  	return <div>About 페이지입니다.</div>
    {query.name && <p>는 이름은 {query.name} 입니다.</p>}
}

条件付きレンダリング

&&演算子

import { useQuery,gql } from "@apollo/client"
import { useRouter } from "next/router"

const FETCH_PRODUCT = gql`
  query fetchProduct($productId: ID) {
    fetchProduct(productId: $productId) {
      seller
      name
      detail
      price
    }
  }
`

export default function DynamicProductRead() {
  const router = useRouter()
  const { data } = useQuery(FETCH_PRODUCT, {
    variables: { productId: router.query.myId }
  })

  return (
    <>
      <div>판매자 {data && data.fetchProduct.seller}</div>
      <div>상품명 {data && data.fetchProduct.name}</div>
      <div>상품상세 {data && data.fetchProduct.detail}</div>
      <div>상품가격 {data && data.fetchProduct.price}</div>
    </>
  )
}

さんこうえんざんし

data ? data.fetchProduct.seller : "loading" 
// ? 있으면
// : 없으면

optional chaining

// 있으면 보여주고 없으면 보여주지 마세용
data?.fetchProduct.seller 

try-catch構文

  async function zzz() {
    try {
      // 일단 시도해보고
      const result = await createProduct({
        variables: {
          seller: mySeller, 
          createProductInput: {
            name: myName, 
            detail: myDetail, 
            price: Number(myPrice)
            }
        } 
      })
      console.log(result)
      router.push(`05-08-dynamic-product-read/${result.data.createProduct._id}`)
    } catch(error) {
      // 에러나면 이렇게 실행해주세요
      alert(error.message)
    }
  }

その他

コメント

+)graphsqlコメントで#を使用します.感情コメントで/**/使用(HTML)と同じです.graphqlはいつものようにctrl+/を使うと注釈エラーも発生しますのでご注意ください!

かたわく

router.push(`05-08-dynamic-product-read/${result.data.createProduct._id}`)