Estoy haciendo esta tarea, que es crear un sistema PM en React.
Entonces, la funcionalidad principal es tener una lista de proyectos, que deben adquirirse de un archivo JSON (se aclara que no debo usar una base de datos). Así que en la página de inicio tenemos una lista de proyectos y deberíamos poder hacer clic en cualquiera de ellos y al hacer clic debería abrirse una nueva página. La nueva página mostrará el proyecto con información adicional: las tareas del proyecto y su estado.
Supongo que debería hacer esto con el enrutamiento, pero tengo un conocimiento básico de React, aunque lo encuentro interesante. Entonces, ¿cómo debo abordar esto? ¿Debería envolver el componente de mi proyecto en un enlace? Además, cuando abro la nueva página, ¿cómo renderizo el mismo componente pero con información adicional?
A continuación puede encontrar mi código hasta ahora:
Aplicación.js
import logo from './logo.svg'; import './App.css'; import {Projects} from './components/Projects' import {Header} from './Header.js' function App() { return ( <div className="App"> <Header /> <Projects /> </div> ); } export default App;Proyecto.js
import React from "react"; export const Project = ({name}) => { console.log(name) if (!name) return <div />; return ( <table> <tbody> <tr> <td> <h5>{name}</h5> </td> </tr> </tbody> </table> ); };Proyectos.js
import React from "react"; import data from "../data/data.json"; import {Project} from "./Project.js"; export const Projects = () => { return ( <> <div className="project-container"> {data.map((data) => { console.log(data) return ( <div key={data.Name}> <Project name={data.Name} /> </div> ); })} </div> </> ); };Necesitas hacer rutas dinámicas con react-router-dom.
Aquí proporciona dinámicamente el parámetro "id";
Agregar enlace a la documentación de react-router-dom - https://reactrouter.com/docs/en/v6/getting-started/tutorial
import { Route, Routes } from 'react-router-dom'; import { DetailPage } from '../pages/DetailPage'; export const useRoutes = () => { return ( <Routes> <Route path="/detail/:id" element={<DetailPage />} /> </Routes> ); };Luego, crea un componente de página para mostrar datos sobre el proyecto elegido.
import { Project } from '../components/Project'; export const DetailPage = () => { /* You can get your ID param with react-router-dom hook - useParams(); const { id } = useParams(); Your custom logic for getting data for the project which you want to show on this page and drop it into your Project component. */ return <Project project={project} />; };En su caso, puede obtener una lista de sus proyectos de la base de datos, luego representarlos como una lista y proporcionar a todos onClick la redirección a la ruta con una identificación del proyecto actual. Después de hacer clic, tendrá dicha identificación y obtendrá datos para un proyecto actual y luego los renderizará. En su caso, puede obtener una lista de sus proyectos de la base de datos, luego representarlos como una lista y proporcionar a todos onClick la redirección a la ruta con una identificación del proyecto actual. Después de hacer clic, tendrá una identificación de proyecto en su ruta y obtendrá datos para un proyecto actual y luego los renderizará.