새로운 Chakra UI Tabsjs를 통해 URL 동기화
파일 이름이
/tabs/[[...path]].tsx
이고 경로가 모두 주워집니다.[1] /* /tabs/[[...path]].tsx */
import { Box, Tab, TabList, TabPanel, TabPanels, Tabs } from "@chakra-ui/react"
import React, { FC } from "react"
import { useRouter } from "next/router"
import { GetServerSideProps } from "next"
const tabMap = [
"dog", "cat"
]
const Page: FC<{ path: string }> = ({ path }) => {
const initialTab = Math.max(tabMap.indexOf(path), 0) // path値から初期タブを決定
const router = useRouter()
return <Box>
<Tabs
onChange={(idx) => {
// タブが変更されたらrouterへpush。
router.push({
pathname: router.pathname,
query: {
path: [tabMap[idx]]
}
}, undefined, { shallow: true }) // shallowすることでrouterを再度呼び出さない
}}
defaultIndex={initialTab}
>
<TabList>
<Tab>
{tabMap[0]}
</Tab>
<Tab>
{tabMap[1]}
</Tab>
</TabList>
<TabPanels>
<TabPanel>
🐶
</TabPanel>
<TabPanel>
🐱
</TabPanel>
</TabPanels>
</Tabs>
</Box>
}
export const getServerSideProps: GetServerSideProps = async (req) => {
const path = req.query.path?.[0] ?? null
return {
props: { path }
}
}
export default Page
useRouter
에서 path를 얻을 수도 있지만 getServerSideProps
에서 경로를 얻을 수도 있다.history.pushstate
[[...path]]
에 관하여 이 보도로 정리되었으니 참조↩︎Reference
이 문제에 관하여(새로운 Chakra UI Tabsjs를 통해 URL 동기화), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/terrierscript/articles/2021-05-04-chakra-ui-next-js-tabs-url텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)