4

Galera, estou com uma dúvida no Next JS, tenho uma página com nome listid.js, ao acessar por exemplo http://localhost:3000/listid/10 eu gostaria de receber o id 10 como parametro na minha página listid.js:

import React, { useState, useEffect } from 'react';

// components

import ListUser from "components/ListUser.js";

function ListId() {
  
  return (
    <>
      <div className="flex flex-wrap mt-4">
        <div className="w-full mb-12 xl:mb-0 px-4">
          <ListUser />
        </div>
      </div>
    </>
  );
 
}

export default ListId;

Segue o código do meu compomente ListUser:

import React, { useState, useEffect } from 'react';
import Api from "../../services/api";
import Router from 'next/router';
import Link from "next/link";


function ListUser() {

  const [user, setUser] = useState(null);

  useEffect(() => {
    async function getItems() {
      try {
        const { data } = await Api.get("/user"); //preciso passar o parametro aqui
        setUser(data);
      } catch (error) {
        console.log(error);
      }
    }
    getItems();
  }, []);

  // console.log(users.length);
  if (users === null) {
    return <h2>Carregando...</h2>;
  }
  return (
    <>
        <div>
            {
              user?.map((user) => {
                return (
                    <p>{user.id}</p>
                )})
            }
        </div>
    </>
    );
}
export default ListUser;

Como eu posso pegar o id na url e passar na requisição da api?

1 Resposta 1

3

Para que você tenha esse formato de URL http://localhost:3000/listid/10 basta criar dentro do diretório pages seguindo esse formato: listid/[id].js onde listid seria uma pasta com a página [id].js dentro.

E para recuperar o paramêtro id você pode utilizar o useRouter do próprio nextjs na página [id].js e acessar o objeto query:

import { useRouter } from 'next/router'

...

const { query } = useRouter()

console.log(query.id)

Tendo recuperado o id do objeto query você pode usa-lo normalmente para realizar a request.

Documentação oficial:

Any route like /post/1, /post/abc, etc. will be matched by pages/post/[pid].js. The matched path parameter will be sent as a query parameter to the page, and it will be merged with the other query parameters.

Tradução

Qualquer rota como /post/1, /post/abc, etc. será correspondida por pages/post/[pid].js. O parâmetro de caminho correspondente será enviado como um parâmetro de consulta para a página e será mesclado com os outros parâmetros de consulta.

Referências:

Dynamic Routes

1
  • 1
    Muito obrigado Gabriel, sua explicação foi de grande ajuda, consegui fazer aqui!
    – Wendell
    Commented 11/02/2021 às 23:46

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .