Pedro Lara {Dev}

En Next, las páginas se convierten en rutas automáticamente al momento de crearlas. Supongamos que tenemos un Proyecto de Next, y deseamos crear una ruta llamada “lecturas” . Lo que debemos hacer es crear un nuevo fichero llamado “lecturas” dentro del directorio “Pages”:

Rutas Dinámicas

Ya vimos como podemos crear páginas y rutas automáticamente. Ahora veremos como podemos crear rutas dinámicas. No te asustes, porque es tan fácil como crear una ruta estática. Sólo basta con crear un nuevo directorio, dentro creamos un directorio especial cuya sintaxis es la siguiente: [id] donde el “id” sería los parámetros que le vamos a pasar de manera dinámica a nuestra nueva ruta.

Supongamos que deseamos crear la ruta dinámica “lecturas”, según lo que acabamos de decir, sería tan sencillo como hacer lo siguiente: llecturas/[id]/index.js

Probemos

Ahora para acceder a nuestra nueva ruta dinámica, debemos escribir el nombre de nuestro directorio seguido de los parametros que deseamos pasarle, en este caso:

http://localhost:3000/admin/lecturas/123

Sin embargo, también es posible crear un directorio y dentro crear un fichero con la siguiente sintaxis: [id].js

import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { FlatGrid } from 'react-native-super-grid';

export default function Example() {
  const [items, setItems] = React.useState([
    { name: 'TURQUOISE', code: '#1abc9c' },
    { name: 'EMERALD', code: '#2ecc71' },
    { name: 'PETER RIVER', code: '#3498db' },
    { name: 'AMETHYST', code: '#9b59b6' },
    { name: 'WET ASPHALT', code: '#34495e' },
    { name: 'GREEN SEA', code: '#16a085' },
    { name: 'NEPHRITIS', code: '#27ae60' },
    { name: 'BELIZE HOLE', code: '#2980b9' },
    { name: 'WISTERIA', code: '#8e44ad' },
    { name: 'MIDNIGHT BLUE', code: '#2c3e50' },
    { name: 'SUN FLOWER', code: '#f1c40f' },
    { name: 'CARROT', code: '#e67e22' },
    { name: 'ALIZARIN', code: '#e74c3c' },
    { name: 'CLOUDS', code: '#ecf0f1' },
    { name: 'CONCRETE', code: '#95a5a6' },
    { name: 'ORANGE', code: '#f39c12' },
    { name: 'PUMPKIN', code: '#d35400' },
    { name: 'POMEGRANATE', code: '#c0392b' },
    { name: 'SILVER', code: '#bdc3c7' },
    { name: 'ASBESTOS', code: '#7f8c8d' },
  ]);

  return (
    <FlatGrid
      itemDimension={130}
      data={items}
      style={styles.gridView}
      // staticDimension={300}
      // fixed
      spacing={10}
      renderItem={({ item }) => (
        <View style={[styles.itemContainer, { backgroundColor: item.code }]}>
          <Text style={styles.itemName}>{item.name}</Text>
          <Text style={styles.itemCode}>{item.code}</Text>
        </View>
      )}
    />
  );
}

const styles = StyleSheet.create({
  gridView: {
    marginTop: 10,
    flex: 1,
  },
  itemContainer: {
    justifyContent: 'flex-end',
    borderRadius: 5,
    padding: 10,
    height: 150,
  },
  itemName: {
    fontSize: 16,
    color: '#fff',
    fontWeight: '600',
  },
  itemCode: {
    fontWeight: '600',
    fontSize: 12,
    color: '#fff',
  },
});