[React] pdf파일을 뷰어로 띄우기

저는 public 폴더 내에 UserGuide.pdf라는 파일을 넣었고 참고바랍니다.

아래와 같이 작성하면, /guide로 진입시 웹뷰어로 pdf를 볼 수 있습니다.

App.tsx

const App: React.FC = () => {

 return (
 ...
 <Route path='/guide' element={<Guide />} />
 ...
 )
}

Guide.tsx

const Guide: React.FC = () => {
  return (
    <div>
        <object 
            data="userGuide.pdf"
            type="application/pdf"
            width="100%"
            height="100%"
            style={{height: '100vh' }}
          >
              <p>
              Your browser does not support PDFs. 
            <Link to="/UserGuide.pdf">Download the PDF</Link>
            </p>
        </object>
    </div>
    )
}

Intro.tsx

const Intro: React:FC = () => {
  return (
    ...
    <Link to='/guide' rel='noopener noreferrer'>User Guide</Link>
    ...
    )
}