2

I have a Reactjs SPA whose file structure looks like this:

enter image description here

In that app there's a simple component (Resume.js) where I want the users to be able to see/download a pdf file within the browser (resume_english.pdf). However I haven't been able to do this neither locally nor in GitHub pages where I plan on hosting the SPA. It always redirects me to the homepage.

Resume.js looks like this:

import React, {Component} from 'react';

class Resume extends Component {
    constructor(props) {
        super(props);

        this.state = {};
    }

    render() {
        return (
            <div className={'resume-container'}>
                <div id={'resume-pdf'}>You can view, download and print my résumé in pdf format in <a
                    href={'./public/resume_english.pdf'}>English</a> and <a href={'#'}>Spanish</a></div>
            </div>
        );
    }
}

export default Resume;

Any ideas on what might be wrong on how to solve it? I already tried importing like this, but didn't work.

danielsto
  • 134
  • 5
  • 17

1 Answers1

5

Looks like this was made with create-react-app. If so, files in the public directory will be copied to build, and the build directory will serve as the root directory for your site. So the appropriate href is /resume_english.pdf.

Just try to enter the url directly in the browser. Something like http://localhost:3000/resume_english.pdf or https://danielsto.github.io/resume_english.pdf

Håken Lid
  • 22,318
  • 9
  • 52
  • 67
  • It works locally, but not on GitHub Pages. Having `href={/resume_english.pdf}` leads to `https://danielsto.github.io/resume_english.pdf`, i.e. `Site not found`. Repository is private, could that be part of the problem? – danielsto Feb 27 '18 at 01:38
  • https://help.github.com/articles/configuring-a-publishing-source-for-github-pages/ – Håken Lid Feb 27 '18 at 01:58
  • 1
    Depends on how the github pages repo is configured. You can use a relative url `./resume_english.pdf` if it's a project page (danielsto.github.io/reponame) and not a user page (danielsto.github.io) – Håken Lid Feb 27 '18 at 02:04