Estoy tratando de crear nuevas rutas de reacción de acuerdo con los accesorios de los componentes. App.js enruta la página de destino al componente Inicio.
import "./App.css"; import Navbar from "./components/Navbar"; import Home from "./components/Home"; import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; function App() { return ( <div> <Navbar /> <Router> <Routes> <Route path="/" element={<Home />} /> </Routes> </Router> </div> ); } export default App;Tengo un archivo de tarjeta de servicio donde quiero crear nuevas rutas de acuerdo con los accesorios. Como por ejemplo
route = lorem -> /services/lorem route = ipsum -> /services/ipsumLa tarjeta de servicio se ve así
import React from "react"; import "../css/servicecard.css"; import { BrowserRouter, Routes, Route } from "react-router-dom"; import Home from "./Home"; const ServiceCard = ({ text, subClass, image, route }) => { return ( <> <div className={`card-container ${subClass}`} data-aos="fade-up"> <span className="card-title">{text}</span> <img src={image} alt="service-icon" /> </div> </> ); }; export default ServiceCard;Creo que estás hablando de parámetros de ruta , aquí hay un ejemplo:
export default function ParamsExample() { return ( <Router> <div> <h2>Accounts</h2> <ul> <li> <Link to="/netflix">Netflix</Link> </li> <li> <Link to="/zillow-group">Zillow Group</Link> </li> <li> <Link to="/yahoo">Yahoo</Link> </li> <li> <Link to="/modus-create">Modus Create</Link> </li> </ul> <Switch> <Route path="/:param" children={<Child />} /> </Switch> </div> </Router> ); }y en el componente hijo:
function Child() { let { param } = useParams(); return ( <div> <h3>ID: {param}</h3> </div> ); }