1

Estoy practicando el enrutamiento con parametros en React.js. Realizé un proyecto en el que tengo dos componentes principales o secciones : Lugares y Mascotas(animales).

Por ejemplo Cuando voy a la seccion LUGARES y cliqueo el boton -ir a animales de italia-

introducir la descripción de la imagen aquí

En la url , aparece la ruta con el parametro correspondiente -italy-

introducir la descripción de la imagen aquí

Y la filtracion funciona correctamente ya que me lleva a los animales de solo italia.

Sin embargo cuando uso el boton del menu principal ANIMALES En la url aparece todo normal como lo pusé en el router, pero la página sale en blanco. Es decir no me muestra las tarjetas.

introducir la descripción de la imagen aquí

Creo que es en la manera en la que se hizo la validacion en cada elemento del componente MASCOTA , no se como solucionar esto para que cuando utilize aquel boton ANIMALES que no tiene filtros, aparezcan todos los animales sin categorias del pais.

A continuación mostraré el codigo

Archivo encabezado.js que es donde esta el boton que redireciona a los animales SIN FILTROS.

import React from 'react';

import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import SvgIcon from '@material-ui/core/SvgIcon';



// funcion para el icono svg

function HomeIcon(props) {
    return (
        <SvgIcon {...props}>
            <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
        </SvgIcon>
    );
}

// estilos
const useStyles = makeStyles((theme: Theme) =>
    createStyles({
        root: {
            flexGrow: 1,
        },
        menuButton: {
            marginRight: theme.spacing(2),
        },
        title: {
            flexGrow: 1,
        },
    }),
);


export default function Header() {
    const classes = useStyles();

    return (
        <div className={classes.root}>
            <AppBar position="fixed">
                <Toolbar>
                    <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu">
                      
                        <Button href="/"  color="inherit" >   <HomeIcon /> </Button>

                    </IconButton>
                    <Typography variant="h6" className={classes.title}>
                        Galeria de Mascotas
            </Typography>
                    <Button variant="contained" color="primary" href="/lugares" title="ruta sin parametros">
                        Lugares</Button>
                    <Button variant="contained" color="primary" href="/mascotas"  title="ruta sin parametros">
                        Animales</Button>
                </Toolbar>
            </AppBar>
        </div>
    );
}

Archivo router.js que es donde hago el enrutamiento

    // ENRUTAR LAS VISTAS 
import React from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';

import Link from '@material-ui/core/Link';

import Lugares from './componentes/lugares';
import Mascotas from './componentes/mascotas';
import NotFound from './componentes/notFound';


export default function Rutas() {

    return (
        <BrowserRouter>
            <Switch>
                <Route exact path="/" component={Lugares} />
                <Route exact path="/lugares" component={Lugares} /> {/* ruta sin parametros */}
                <Route exact path="/mascotas" component={Mascotas} />{/* ruta sin parametros */}



                {/* se usa la propiedad render para espesificar que se pasa un nuevo parametro:
                 pais a el componenete mascotas */}

                <Route path="/mascotas/:pais" render={({ match }) => {
                    return <Mascotas pais={match.params.pais} />
                }} />
                <Route component={NotFound} />

            </Switch>
        </BrowserRouter>
    );
}

Archivo mascotas.js que corresponde a la seccion animales

// ARCHIVO DE LAS TARJETAS
import React from 'react';
import { useState, useEffect} from 'react'; // hooks

import { makeStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import Typography from '@material-ui/core/Typography';
import CardMedia from '@material-ui/core/CardMedia';
import CardActionArea from '@material-ui/core/CardActionArea';
import FavoriteIcon from '@material-ui/icons/Favorite';
import IconButton from '@material-ui/core/IconButton';

// estilos
const useStyles = makeStyles({
    root: {
        minWidth: 275,
        width: '40%',
        margin: 50,
    },
    bullet: {
        display: 'inline-block',
        margin: '1px 2px',
        transform: 'scale(0.8)',
    },
    title: {
        fontSize: 14,
    },
    pos: {
        marginBottom: 12,
    },
    cardsContainer: {
        display: 'flex',
        flexWrap: 'wrap',
        alignItems: 'center',
    }, media: {
        height: 300,
    },subheader:{
        fontSize: 12,
    },
});

// funcion

export default function Mascotas(props) {
    const classes = useStyles();
    const bull = <span className={classes.bullet}>•</span>;

    const [filtro, setFiltro] = useState(props.pais) //estado filtro recibe la propiedad pais
    
    // cada vez que se renderize el 
    // componente Mascotas, por medio del link. Dentro del hook se modifica el estado de la variable filtro:
    useEffect(()=>{
        setFiltro(props.pais);
      }, [props.pais]);

    //   validacion de los filtros
    return (
        <div className={classes.cardsContainer}>
        {(filtro === 'Colombia') ?
            <Card className={classes.root} id="colombia">
                <CardActionArea>
                    <CardMedia
                        className={classes.media}
                        image="https://www.np360.com.hk/sites/default/files/attraction/main_image/1804/08_Sea-Chinese_white_dolphin_800x800.jpg"
                        title="Species of toothed whale "
                    />
                    <CardContent>
                    <Typography className={classes.pos} color="textSecondary" >
          Colombia
        </Typography>
                        <Typography gutterBottom variant="h5" component="h2">
                            Pink {bull} Dolphin
          </Typography>
                        <Typography variant="body2" color="textSecondary" component="p">
                            The Amazon river dolphin, also known as the boto, bufeo or pink river dolphin, is a species of
                            toothed whale classified in the family Iniidae.
         </Typography>
                    </CardContent>
                </CardActionArea>
                <CardActions>
                    <IconButton aria-label="add to favorites">
                        <FavoriteIcon />
                    </IconButton>
                </CardActions>
            </Card> : null }
            {(filtro === 'Italy') ?
            <Card className={classes.root} id="italy">
                <CardActionArea>
                    <CardMedia
                        className={classes.media}
                        image="https://www.wildlife.ca.gov/portals/0/Images/marine/lobsterfmp/spinylobster2.jpg"
                        title="Crustaceans"
                    />
                    <CardContent>
                    <Typography className={classes.pos} color="textSecondary">
          Italy
        </Typography>

                        <Typography gutterBottom variant="h5" component="h2">
                            {bull} Lobster
          </Typography>
                        <Typography variant="body2" color="textSecondary" component="p">
                            Lobsters are a family of large marine crustaceans.
                            Highly prized as seafood, lobsters are economically important, and are often one of the most profitable commodities in coastal areas they populate
         </Typography>
                    </CardContent>
                </CardActionArea>
                <CardActions>
                    <IconButton aria-label="add to favorites">
                        <FavoriteIcon />
                    </IconButton>
                </CardActions>
            </Card>: null}

{(filtro === 'Germany') ?
            <Card className={classes.root} id="germany">
                <CardActionArea>
                    <CardMedia
                        className={classes.media}
                        image="https://www.zoomadrid.com/sites/default/files/blog/2013/08/Lince-europeo.jpg"
                        title="Wild cat"
                    />
                    <CardContent>
                    <Typography className={classes.pos} color="textSecondary">
          Germany
        </Typography>

                        <Typography gutterBottom variant="h5" component="h2">
                            European{bull} Lynx
          </Typography>
                        <Typography variant="body2" color="textSecondary" component="p">
                            The Eurasian lynx is a medium-sized wild cat native to Northern, Central and Eastern Europe to Central Asia and Siberia, the Tibetan Plateau and the Himalayas.
           </Typography>
                    </CardContent>
                </CardActionArea>
                <CardActions>
                    <IconButton aria-label="add to favorites">
                        <FavoriteIcon />
                    </IconButton>
                </CardActions>
            </Card>: null}
            {(filtro === 'Colombia') ?
            <Card className={classes.root} id="colombia">
                <CardActionArea>
                    <CardMedia
                        className={classes.media}
                        image="https://th.bing.com/th/id/R2b45e1d0b7192346fa30fb8177f9c19a?rik=8qNI3qh%2fBe2zEA&riu=http%3a%2f%2f3.bp.blogspot.com%2f-TDgcUwZPOOo%2fVG2cLe_UhDI%2fAAAAAAAATiQ%2fQFqIRRWeZtE%2fs1600%2fWoolly%252BMonkey1.jpg&ehk=gSjVXfEW3JRVSr5FzzV%2bQ2pxV4vKmhSHaPYwm08HOc4%3d&risl=&pid=ImgRaw"
                        title="Lagothrix"
                    />
                    <CardContent>
                    <Typography className={classes.pos} color="textSecondary">
         Colombia
        </Typography>

                        <Typography gutterBottom variant="h5" component="h2">
                            Woolly {bull} monkey
            </Typography>
                        <Typography variant="body2" color="textSecondary" component="p">
                        Woolly monkeys are closely related to spider monkeys.[2] They have a thick brown coat with dark gray appendages.
                        The stomach area is black and heads are light brown. 
           </Typography>
                    </CardContent>
                </CardActionArea>
                <CardActions>
                    <IconButton aria-label="add to favorites">
                        <FavoriteIcon />
                    </IconButton>
                </CardActions>
            </Card>: null}
            {(filtro === 'Italy') ?
            <Card className={classes.root} id="italy">
                <CardActionArea>
                    <CardMedia
                        className={classes.media}
                        image="https://images.pexels.com/photos/584501/pexels-photo-584501.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260"
                        title="Crustaceans"
                    />
                    <CardContent>
                    <Typography className={classes.pos} color="textSecondary">
          Italy
        </Typography>

                        <Typography gutterBottom variant="h5" component="h2">
                             {bull} Crab
            </Typography>
                        <Typography variant="body2" color="textSecondary" component="p">
                        sually hidden entirely under the thorax. They live in all the world's oceans, in fresh water, and on land, are generally covered with a thick exoskeleton, and have a single pair of pincers.
           </Typography>
                    </CardContent>
                </CardActionArea>
                <CardActions>
                    <IconButton aria-label="add to favorites">
                        <FavoriteIcon />
                    </IconButton>
                </CardActions>
            </Card>: null}
            {(filtro === 'Germany') ?
            <Card className={classes.root} id="germany">
                <CardActionArea>
                    <CardMedia
                        className={classes.media}
                        image="https://images.pexels.com/photos/5403275/pexels-photo-5403275.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260"
                        title="Mammal"
                    />
                    <CardContent>
                    <Typography className={classes.pos} color="textSecondary">
                    Germany
        </Typography>

                        <Typography gutterBottom variant="h5" component="h2">
                             {bull} Weasel
            </Typography>
                        <Typography variant="body2" color="textSecondary" component="p">
                        Members of this genus are small, active predators with short legs.
                        Weasels feed on small mammals and have from time to time been considered vermin because some species took poultry from farms.
           </Typography>
                    </CardContent>
                </CardActionArea>
                <CardActions>
                    <IconButton aria-label="add to favorites">
                        <FavoriteIcon />
                    </IconButton>
                </CardActions>
            </Card>: null}
            {(filtro === 'Colombia') ?
            <Card className={classes.root} id="colombia">
                <CardActionArea>
                    <CardMedia
                        className={classes.media}
                        image="https://th.bing.com/th/id/R30107168b2a8eaffcbd5f2f89cb095e2?rik=om%2fZYf6Ojdg3xA&riu=http%3a%2f%2ffarm5.staticflickr.com%2f4126%2f4987254154_ffaa838eb0_z.jpg&ehk=t1zYEHvLjtDYt%2bMDQLpgbyiIm9EtQAHvO2a3o%2fNPJr0%3d&risl=&pid=ImgRaw"
                        title="Genus of whiptail lizards"
                    />
                    <CardContent>
                    <Typography className={classes.pos} color="textSecondary">
          Colombia
        </Typography>

                        <Typography gutterBottom variant="h5" component="h2">
                        {bull} Ameiva 
            </Typography>
                        <Typography variant="body2" color="textSecondary" component="p">
                        Ameiva, commonly called jungle-runners, is a genus of whiptail lizards that belongs to the family Teiidae.
           </Typography>
                    </CardContent>
                </CardActionArea>
                <CardActions>
                    <IconButton aria-label="add to favorites">
                        <FavoriteIcon />
                    </IconButton>
                </CardActions>
            </Card>: null}
            {(filtro === 'Italy') ?
            <Card className={classes.root} id="italy">
                <CardActionArea>
                    <CardMedia
                        className={classes.media}
                        image="https://aquaticheaven.files.wordpress.com/2011/06/461px-snail-wa_edit02.jpg?w=230"
                        title="Terrestrial pulmonate gastropod molluscs"
                    />
                    <CardContent>
                    <Typography className={classes.pos} color="textSecondary">
                    Italy
        </Typography>

                        <Typography gutterBottom variant="h5" component="h2">
                             {bull} Snail
            </Typography>
                        <Typography variant="body2" color="textSecondary" component="p">
                        A snail is, in loose terms, a shelled gastropod. The name is most often applied to land snails, terrestrial pulmonate gastropod molluscs.
           </Typography>
                    </CardContent>
                </CardActionArea>
                <CardActions>
                    <IconButton aria-label="add to favorites">
                        <FavoriteIcon />
                    </IconButton>
                </CardActions>
            </Card>: null}
            {(filtro === 'Germany') ?
            <Card className={classes.root} id="germany">
                <CardActionArea>
                    <CardMedia
                        className={classes.media}
                        image="https://th.bing.com/th/id/OIP.YyxvlOjo19zAXlnFkfofIAHaE2?pid=Api&rs=1"
                        title="Species of goat-antelope"
                    />
                    <CardContent>
                    <Typography className={classes.pos} color="textSecondary">
          Germany
        </Typography>

                        <Typography gutterBottom variant="h5" component="h2">
                             {bull}  Chamois
            </Typography>
                        <Typography variant="body2" color="textSecondary" component="p">
                        The chamois are native to mountains in Europe, from west to east.
                        The chamois has also been introduced to the South Island of New Zealand. Some subspecies of chamois are strictly protected in the EU 
           </Typography>
                    </CardContent>
                </CardActionArea>
                <CardActions>
                    <IconButton aria-label="add to favorites">
                        <FavoriteIcon />
                    </IconButton>
                </CardActions>
            </Card>: null}
            {(filtro === 'Italy') ?
            <Card className={classes.root} id="italy">
                <CardActionArea>
                    <CardMedia
                        className={classes.media}
                        image="https://www.humphreysfarm.com/productcart/pc/catalog/5887-lg.jpg"
                        title="Crustaceans "
                    />
                    <CardContent>
                    <Typography className={classes.pos} color="textSecondary">
          Italy
        </Typography>

                        <Typography gutterBottom variant="h5" component="h2">
                             {bull} Shrimp
            </Typography>
                        <Typography variant="body2" color="textSecondary" component="p">
                        Shrimp are decapod crustaceans with elongated bodies and a primarily swimming mode of locomotion – most commonly Caridea and Dendrobranchiata. 
           </Typography>
                    </CardContent>
                </CardActionArea>
                <CardActions>
                    <IconButton aria-label="add to favorites">
                        <FavoriteIcon />
                    </IconButton>
                </CardActions>
            </Card>: null}

        </div>
    );
}

Archivo lugares.js que es donde estan los botones que deben redireccionar a la seccion animales CON FILTROS.

// ARCHIVO DE LA SECCION DEL ACORDION

// se importan los elementos y arhivos necesarios
import React from 'react';
import { Theme, createStyles, makeStyles } from '@material-ui/core/styles';
import Accordion from '@material-ui/core/Accordion';
import AccordionSummary from '@material-ui/core/AccordionSummary';
import AccordionDetails from '@material-ui/core/AccordionDetails';
import Typography from '@material-ui/core/Typography';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import Link from '@material-ui/core/Link';
import Button from '@material-ui/core/Button';
import './lugares.css';
import './mascotas';

// estilos

const useStyles = makeStyles((theme: Theme) =>
    createStyles({
        root: {
            marginTop: 70,
            width: '95%',
        },
        heading: {
            fontSize: theme.typography.pxToRem(15),
            fontWeight: theme.typography.fontWeightRegular,
        }, 

    }),
);

// funcion
export default function Lugares() {
    const classes = useStyles();

    return (
        <div className={classes.root}>
            <Accordion>
                <AccordionSummary
                    expandIcon={<ExpandMoreIcon />}
                    aria-controls="panel1a-content"
                    id="panel1a-header"
                >
                    <div className="ItalyFlag img" >
                    </div>
                    <Typography className={classes.heading}>Italy</Typography>
                </AccordionSummary>
                <AccordionDetails>
                    <Typography>
                        The most Common animals In Italy are Lobsters, Crabs, Snails and Shrimp.
            </Typography>
                </AccordionDetails>
                <Button   title="ruta con parametros" component={Link} href="/mascotas/Italy" color="inherit">Ir a Animales de Italia</Button>

            </Accordion>
            <Accordion>
                <AccordionSummary
                    expandIcon={<ExpandMoreIcon />}
                    aria-controls="panel2a-content"
                    id="panel2a-header"
                >
                    <div className="ColombiaFlag img"></div>

                    <Typography className={classes.heading}>Colombia</Typography>
                </AccordionSummary>
                <AccordionDetails>
                    <Typography>
                        The most Common animals In Colombia are Pink Dolphins, Belly Monkey and Metallic Lizards.
            </Typography>
                </AccordionDetails>
                <Button component={Link} title="ruta con parametros"  href="/mascotas/Colombia" color="inherit">Ir a  de Colombia</Button>

            </Accordion>
            <Accordion>
                <AccordionSummary
                    expandIcon={<ExpandMoreIcon />}
                    aria-controls="panel2a-content"
                    id="panel2a-header"
                >
                    <div className="GermanyFlag img"></div>

                    <Typography className={classes.heading}>Germany</Typography>
                </AccordionSummary>
                <AccordionDetails>
                    <Typography>
                        The most Common animals In Germany are European lynx, Weasel and Rebeco.
            </Typography>
                </AccordionDetails>
                <Button component={Link} title="ruta con parametros"  href="/mascotas/Germany" color="inherit">Ir a Animales de Alemania    </Button>

            </Accordion>
        </div>
    );
}
3
  • Karol, la respuesta ha sido actualizada, agregue unos cambios mínimos para tu propósito, avísanos si logras avanzar, saludos
    – g.4
    Commented el 29 ene. 2021 a las 21:09
  • Karol, si consideras que la respuesta fue útil, vota por ella, suerte y salud!
    – g.4
    Commented el 30 ene. 2021 a las 3:35
  • @g.4 hola! Ya acepte tu respuesta desde hace horas. Muchas gracias por ayudarme a resolver este problema llevada horas intentanto encontrar una solucion y nada.
    – Karol
    Commented el 30 ene. 2021 a las 14:32

2 respuestas 2

1

El componente Route contiene 3 propiedades por default:

  • match
  • location
  • history

En el ejemplo de router.js, ya se configuró un componente Route para especificar URL's dinámicas:

<Route exact path="/mascotas/:pais" component={Mascotas} />{/* ruta con parametros */}
                

Una forma de extraer parámetros de la URL que llegan al componente Route, es por medio de la propiedad params, la cual forma parte de match, propiedad que nos entrega el componente Route:

match.params.parametro

El componente Route sabe a partir de donde extraer este valor de la URL, se le indica con el símbolo colon, dentro de la propiedad path, esta técnica se conoce como path dinámico:

<Route path="/mascotas/:pais" />

Luego, se puede hacer uso de la propiedad render del componente Route, para mostrar el componente Mascotas especificando que se va a pasar una nueva propiedad, el parámetro de la URL pais, que obtenemos de match.params:

//desctructuring ES6 : {match}     
<Route path="/mascotas/:pais" render={({match})=>{
            return <Mascotas pais={match.params.pais} />
          }} />

Actualización

Se agrega otro componente Route para configurar la ruta "/mascotas", se especifica que la ruta debe ser exacta, enseguida se pasa la propiedad pais de forma estática para usarla más adelante:

<Route exact path="/mascotas" render={()=> {
          return <Mascotas pais="all" />
        }} />

A continuación, en el componente Mascotas se puede definir un nuevo estado filtro con el hook useState, para recibir la propiedad pais:

const [filtro, setFiltro] = useState(props.pais)

Además, se define otro Hook useEffect, especificando que se dispare cada que props.pais cambie, es decir cada vez que se renderize el componente Mascotas, por medio del link. Dentro del hook se modifica el estado de la variable filtro:

  useEffect(()=>{
    setFiltro(props.pais);
  }, [props.pais]);

Actualización

Finalmente, se usa el operador ternario y el estado de filtro para una validación por cada componente Card, nótese que también se valida cuando la variable de estado filtro viene como all (operador lógico OR), que es el caso donde el usuario especificó la ruta "/mascotas", donde se mostrarán todas las Cards:

return (
    <div className={classes.cardsContainer}>
      {(filtro === 'Colombia' || filtro === 'all') ?
      <Card className={classes.root} 
      id="colombia">
      card colombia
      </Card> : null}
      {(filtro === 'Italy' || filtro === 'all') ?
      <Card className={classes.root} id="italy">
      card italy
       </Card> : null}
       {(filtro === 'Germany' || filtro === 'all') ?
       <Card className={classes.root} id="germany">
      card germany
      </Card> : null}
    </div>
  );

Son cambios mínimos al código original, la idea es que puedas continuar con tu implementación original y mejorar poco a poco su diseño.

Te dejo un ejemplo que puedes correr por separado, solo faltaría que trates de adaptarlo a tu código original, no pude ponerlo como ejecutable aquí, pues me fue imposible configurar react-router para la herramienta de código de S.O.:

import React from 'react';
import { useState, useEffect} from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import Card from '@material-ui/core/Card';
import { makeStyles } from '@material-ui/core/styles';

function App(){

  return (
    <>
      <Router>
      <Link to="/mascotas/Italy">Pais Italia</Link>
      <br />
      <Link to="/mascotas/Germany">Pais Alemania</Link>
      <br />
      <Link to="/mascotas/Colombia">Pais Colombia</Link>
      <br />
      <Route path="/mascotas/:pais" render={({match})=>{
        return <Mascotas pais={match.params.pais} />
      }} />
      <Route exact path="/mascotas" render={()=> {
      return <Mascotas pais="all" />
      }} />
      </Router>
    </>
  );
}
  
function Mascotas(props){
  const [filtro, setFiltro] = useState(props.pais)

  useEffect(()=>{
    setFiltro(props.pais);
  }, [props.pais]);
  
  const classes = useStyles();

  return (
    <div className={classes.cardsContainer}>
      {(filtro === 'Colombia' || filtro === 'all') ?
      <Card className={classes.root} 
      id="colombia">
      card colombia
      </Card> : null}
      {(filtro === 'Italy' || filtro === 'all') ?
      <Card className={classes.root} id="italy">
      card italy
       </Card> : null}
       {(filtro === 'Germany' || filtro === 'all') ?
       <Card className={classes.root} id="germany">
      card germany
      </Card> : null}
    </div>
  );
}

// estilos
const useStyles = makeStyles({
    root: {
        minWidth: 275,
        width: '40%',
        margin: 50,
    },
    bullet: {
        display: 'inline-block',
        margin: '1px 2px',
        transform: 'scale(0.8)',
    },
    title: {
        fontSize: 14,
    },
    pos: {
        marginBottom: 12,
    },
    cardsContainer: {
        display: 'flex',
        flexWrap: 'wrap',
        alignItems: 'center',
    }, media: {
        height: 300,
    },subheader:{
        fontSize: 12,
    }
});

export default App;

Espero que sea de ayuda.

2
  • Probé tu codigo, si funciona correctamente. Sin embargo en el menu, en la ruta principal de mascotas, No me redirecciona a ninguna tarjeta. Sospecho que es por el codigo de la validacion. Voy a editar la pregunta, revisala porfavor.
    – Karol
    Commented el 29 ene. 2021 a las 18:51
  • @Karol ya vi la actualización, lo estoy revisando...
    – g.4
    Commented el 29 ene. 2021 a las 20:10
0

Ok, necesitas hacer 2 cosas:

  1. Crear una lógica que te permita renderizar SOLO los animales del país de la ruta
  2. Obtener la ruta de la página actual en la sección de mascotas para poder filtrar los animales por el país.

Yo te recomiendo que separes los datos de los elementos, estás reutilizando el código para cada tarjeta, porque todos los animales tienen la misma estructura. Separar los datos te va dar varias ventajas:

  • Te va a permitir filtrar los datos antes de renderizar para escoger que animales ver en la página.
  • En caso de que necesites agregar los animales solo necesitas cambiar el objeto que tienes los datos y tu página automáticamente los renderiza con la estructura que necesitas.
  • Te ahorra tener que escribir código y eso representa también una mejor lectura y debuggeo de tu página.

Elementos renderizados por componente

El patrón que tienes para cada tarjeta de animal es el mismo, React existe para crear componentes personalizados y reutilizarlos de manera dinámica, utilicemos esta funcionalidad, creemos un componente para la tarjeta de los animales.

Lo primero es identificar los datos que ocupas para cada tarjeta: url de la imagen, nombre, país, descripción y título. Estos datos se van a pasar como props a tus componentes y los destructuramos al inicio del componente para poder usarlos.

Se vería algo cómo así (Todo el código que voy a usar es una base para que tengas una idea, no tengo tiempo para hacer una solución completa):

// estilos
const useStyles = makeStyles({
    root: {
        minWidth: 275,
        width: '40%',
        margin: 50,
    },
    bullet: {
        display: 'inline-block',
        margin: '1px 2px',
        transform: 'scale(0.8)',
    },
    title: {
        fontSize: 14,
    },
    pos: {
        marginBottom: 12,
    },
    cardsContainer: {
        display: 'flex',
        flexWrap: 'wrap',
        alignItems: 'center',
    }, media: {
        height: 300,
    },subheader:{
        fontSize: 12,
    }
});

export default function CardMascotas(props) {//De aqui sacamos los props
    const {img,titulo,pais,nombre,descripcion} = props.mascota;//Destructuracion
    const classes = useStyles();
    const bull = <span className={classes.bullet}>•</span>;

    return (
        <div className={classes.cardsContainer}>
            <Card className={classes.root} id="colombia">
                <CardActionArea>
                    <CardMedia
                        className={classes.media}
                        image={img}
                        title={titulo}
                    />
                    <CardContent>
                    <Typography className={classes.pos} color="textSecondary" >
          {pais}
        </Typography>
                        <Typography gutterBottom variant="h5" component="h2">
                            {nombre}
          </Typography>
                        <Typography variant="body2" color="textSecondary" component="p">
                            {descripcion}
         </Typography>
                    </CardContent>
                </CardActionArea>
                <CardActions>
                    <IconButton aria-label="add to favorites">
                        <FavoriteIcon />
                    </IconButton>
                </CardActions>
            </Card>)}

Esto te va a permitir crear una tarjeta de animal simplemente haciendo:

<CardMascotas
    img = "https://www.zoomadrid.com/sites/default/files/blog/2013/08/Lince-europeo.jpg"
    titulo = "Wild cat"
    pais = "Germany"
    nombre = "European Lynx"
    descripcion = "The Eurasian lynx is a medium-sized wild cat native to Northern, Central and Eastern Europe to Central Asia and Siberia, the Tibetan Plateau and the Himalayas."
/>

Esto corresponderia a un nuevo archivo que define un componente de React.¿Porqué queremos esto?...

Facilita la renderización condicional de tus objetos

En el componente padre ahora puedes simplemente tener un array donde se guarden todas las mascotas como objetos, algo como así:

const mascotasData =[
    {
    img : "https://www.zoomadrid.com/sites/default/files/blog/2013/08/Lince-europeo.jpg",
    titulo : "Wild cat",
    pais = :Germany",
    nombre : "European Lynx",
    },
    {img....

]

Entonces puedes obtener mascotas por país usando métodos como filter(), entonces cuando vayas a renderizar tus elementos en el elemento padre, solo tienes que filtrarlos y luego iterar sobre el array de mascotas para generar por cada uno una tarjeta de mascota (CardMascotas), así:

import CardMascotas from './componentes/CardMascotas';//No olvides importar tu nuevo componente

    const mascotasData =[
        {
        img : "https://www.zoomadrid.com/sites/default/files/blog/2013/08/Lince-europeo.jpg",
        titulo : "Wild cat",
        pais = :Germany",
        nombre : "European Lynx",
        },
        {img....
    
    ]

export default function Mascotas() {
    const classes = useStyles();
    const bull = <span className={classes.bullet}>•</span>;
    
    const pais = PAIS;//Ya vamos con esto a futuro
    
    const mascotasFiltradas = mascotasData.filter( mascota=>(mascota.pais===pais) );//Filtramos las mascotas

    //Aqui viene la magia, por cada elemento del array filtrado generamos una CardMascota
    return ( mascotasFiltradas.map( mascota=>(

    <CardMascotas
        img = {mascota.img}
        titulo = {mascota.titulo}
        pais = {mascota.pais}
        nombre = {mascota.nombre}
        descripcion = {mascota.descripcion}
    />

    >) );
}

¿Qué queda?

Obtener la ruta para saber que país necesita el usuario y hacer el filtrado

Para esto podemos usar useLocation de ReactRouterDOM

console.log(useLocation().pathname);

No olvides importar esta función con:

import { useLocation } from 'react-router-dom'

Puedes manipular esta string para obtener el país dependiendo de la ruta en donde estes y reemplazar la lógica anterior para asignar la variable PAIS en el código anterior.

Lo que quiero proveer como solución es una manera de ayudarte, no probé esté código porque se me complica por tiempo, puede tener typos y reconozco que no es la solución más optima. Sin embargo, creo que es lo que necesitas saber para lograr la implementación que buscas.

Buena suerte programando.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.