Tengo una aplicación de reacción, que hago pensando en crear-reaccionar-aplicación. Quiero hacer aquí un enlace, que se referirá al archivo project.html. Traté de hacer algo como esto:
const Portfolio = (props) => { return ( <a href="../projects/project.html" target="_blank"> <button>Go to this project</button> </a> ) }Pero esto me llevó a http://localhost:3000/projects/project.html y reaccioné a la aplicación. También traté de importar esta ruta como:
import html from "../projects/project.html"y luego hacer algo como esto:
<a href={html} target="_blank"> <button>Go to this project</button> </a> pero reacciona diciendo que necesito un cargador para esto. Encuentro que hay html-loader, lo instalo con npm install --save-dev html-loader y agrego la configuración a webpack.config.js pero nada cambió
Si su archivo de projects/project.html contiene solo contenido estático y no requiere nada del código base, puede mover la carpeta de projects a la carpeta public y vincular a ese archivo en su componente React con:
const Portfolio = (props) => { return ( <a href="/projects/project.html" target="_blank"> Go to this project </a> ) }Primero instale el cargador html usando
npm install --save-dev html-loaderAgregue las siguientes líneas a su archivo webpack.config
{ project: /\.(html)$/, use: { loader: 'html-loader', options: { attrs: [':data-src'] } } }Ahora puedes importar así
import Page from './project.html'; var htmlDoc = {__html: Page};Luego, a cambio del bloque de reacción, use así
<div dangerouslySetInnerHTML={htmlDoc} />