0

I have a react app, which i make thought create-react-app. I want to make here a link, that will refer to project.html file. I tried to make something like this:

const Portfolio = (props) => {
    return (
            <a href="../projects/project.html" target="_blank">
                <button>Go to this project</button>
            </a>
    )
}

But this lead me to http://localhost:3000/projects/project.html and react app. I also tried to import this path like:

import html from "../projects/project.html"

and then to do something like this:

        <a href={html} target="_blank">
            <button>Go to this project</button>
        </a>

but react say that i need some loader for this. I find that there are html-loader, i install it by npm install --save-dev html-loader and add configuration to webpack.config.js but nothing changed

Drew Reese
  • 165,259
  • 14
  • 153
  • 181
Gleb
  • 13
  • 3

2 Answers2

0

If your projects/project.html file contains only static content and does not require anything from the codebase, you could move the projects folder to the public folder, and link to that file in your React component with:

const Portfolio = (props) => {
    return (
            <a href="/projects/project.html" target="_blank">
                Go to this project
            </a>
    )
}
moonstar-x
  • 163
  • 7
-1

First install html loader using

npm install --save-dev html-loader

Add below lines to your webpack.config file

{
  project: /\.(html)$/,
  use: {
    loader: 'html-loader',
    options: {
      attrs: [':data-src']
    }
  }
}

Now you can import like this

import Page from './project.html';
var htmlDoc = {__html: Page};

Then, in return block of react, use like this

<div dangerouslySetInnerHTML={htmlDoc} />
Harry
  • 754
  • 2
  • 16
  • nothing changed, react say:`Compiled with problems:X ERROR in ./src/projects/piano/index.html 1:0 Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders > | | ` i have several projects, i say that i want to open project.html to have some general solution for all projects, but if it important i have a project folder inside which i have projects folders and inside every of this project i have index.html – Gleb Mar 09 '22 at 13:59
  • https://ibb.co/MhwDRKV full folder's hierarchy – Gleb Mar 09 '22 at 14:06
  • @Gleb please refer this: https://stackoverflow.com/questions/33469929/you-may-need-an-appropriate-loader-to-handle-this-file-type-with-webpack-and-b – Harry Mar 09 '22 at 14:07