E aí, programador! o/

Nessa aula você irá aprender como utilizar parâmetros de rota para criar rotas dinâmicas.

Rotas dinâmicas são rotas que possuem uma única interface, porém que irá carregar dados diferentes de acordo com o valor que foi passado na URL. Alguns exemplos comuns de rotas dinâmicas são: produtos em uma loja, posts em um blog, imagens em uma galeria, etc.

1. Usar rotas dinâmicas no React Router é simples. Primeiro, crie a rota no arquivo “router.jsx”:

   // ...
   import Cart from "./pages/Cart";
   import Product from "./pages/Product";
   
   const router = createBrowserRouter([
     {
       path: "/",
       element: <RootLayout />,
       children: [{
         path: "products",
         element: <Products />
       }, {
         path: "products/:productId",
         element: <Product />
       }, {
         path: "cart",
         element: <Cart />
       }]
     },
     {
       path: "/admin",
       element: <AdminHome />
     }
   ])
   
   export default router;
   

2. Agora crie o componente Product.jsx na pasta “pages” com um conteúdo base:

   Obs.: repare que ao digitar manualmente qualquer rota no formato “/products/xxxx” chegamos a essa tela.

   import { Link } from "react-router-dom"
   
   export default function Product() {
     return (
       <section>
         <Link to="/products">
           <button>Voltar</button>
         </Link>
         <h2>nome do produto</h2>
         <p>descrição do produto</p>
         <p>R$ 00,00</p>
         <button>Comprar</button>
       </section>
     )
   }
   

3. Atualize o componente “Prodcuts.jsx” e adicione um Link que leva para a rota dinâmica:

   import { Link } from "react-router-dom"
   import products from "../database.json"
   
   export default function Products() {
     return (
       <section>
         <h2>Todos os produtos</h2>
         <p>Confira todas as nossas ofertas.</p>
         <section className="products">
           <h3>Processadores</h3>
           <ul>
             {products.map((product) => (
               <li key={product.id}>
                 <h4>{product.name}</h4>
                 <p>R$ {product.price}</p>
                 <Link to={`/products/${product.id}`}>
                   <button>Ver</button>
                 </Link>
                 <button>Compras</button>
               </li>
             ))}
           </ul>
         </section>
       </section>
     )
   }
   

4. Para finalizar, utilize o hook “useParams” do React Router para ter acesso aos parâmetros da rota atual. Com ele podemos procurar no array de produtos pelo produto correto e colocar suas informações na tela:

   import { Link, useParams } from "react-router-dom"
   import products from "../database.json"
   
   export default function Product() {
     const { productId } = useParams()
   
     const product = products.find(p => p.id === +productId)
   
     if (!product) {
       return (
         <h2>Oops... Esse produto não foi encontrado =(</h2>
       )
     }
   
     return (
       <section>
         <Link to="/products">
           <button>Voltar</button>
         </Link>
         <h2>{product.name}</h2>
         <p>{product.description}</p>
         <p>R$ {product.price}</p>
         <button>Comprar</button>
       </section>
     )
   }