如何在Next中访问getServerSideProps中的路由参数,js？

dzhpxtsq 于 2023-04-30 发布在其他

关注(0)|答案(1)|浏览(124)

我想使用slug e中的ID查询我的Supabase表。例如localhost:3000/book/1，然后在Next中的页面上显示有关该图书的信息。js。

table

book/[id]。js

import { useRouter } from 'next/router'
import { getBook } from '@/utils/supabase-client';

export default function Book({bookJson}) {
  const router = useRouter()
  const { id } = router.query
  
  return <div>
    <p>Book: {id}</p>
    <h1>{bookJson}</h1>
  </div>
}

export async function getServerSideProps(query) {
  const id = 1 // Get ID from slug
  const book = await getBook(id);
  const bookJson = JSON.stringify(book)

  return {
    props: {
      bookJson
    }
  };
}

utils/supabase-client。js

export const getBook = async (id) => {
  const bookString = id
  let bookId = parseInt(bookString);
  
  const { data, error } = await supabase
    .from('books')
    .select('id, name')
    .eq('id', bookId)

  if (error) {
    console.log(error.message);
    throw error;
  }

  return data || [];
};

next.js

来源：https://stackoverflow.com/questions/69058259/how-to-access-route-parameter-inside-getserversideprops-in-next-js

1条答案

按热度按时间

qv7cva1a1#

您可以使用params字段通过getServerSideProps的上下文访问路由参数。
params：如果此页面使用dynamic route，则params包含路由参数。如果页面名是[id].js，那么params看起来就像{ id: ... }。

Next.js，数据获取：getServerSideProps，Context参数

export async function getServerSideProps(context) {
    const id = context.params.id // Get ID from slug `/book/1`
    
    // Rest of `getServerSideProps` code
}

或者，您也可以使用query字段访问路由参数。不同之处在于query还将包含在URL中传递的任何查询参数。

export async function getServerSideProps(context) {
    const id = context.query.id // Get ID from slug `/book/1`
    // If routing to `/book/1?name=some-book`
    console.log(context.query) // Outputs: `{ id: '1', name: 'some-book' }`

    // ...
}

赞(0）回复(0）举报 2023-04-30

我来回答

如何在Next中访问getServerSideProps中的路由参数,js？

1条答案

相关问题

热门标签

最新问答