View/Download Pdf Files in React - Router 4

react-pdf print
react-pdf codepen
@react-pdf/renderer example
react-pdf download link
react-pdf create-react app
react download pdf from api
react download file
react-pdf-viewer npm

I have a set of pdf files sitting in a folder in my project.

All I need to do is to create a link to these PDF files and view them in browser or download it.

I use React Router 4 and React 16 and create-react-app bootstrapping tool.

Regardless of how I link it (Link component or a tag) it still goes to my last Route in my router config.

I have been googling for last two hours... But no luck..

Is there any way to tell router not to route for PDF/XLS files?


I met the same issue, I think it's because of the way CRA handles queries : I ended up putting my PDF files in the public folder, and link to them using :

{process.env.PUBLIC_URL + '/myfile.pdf'}

as src to my tags.

Not the best way I guess, but works fine enough...

View/Download Pdf Files in React - Router 4 - reactjs - html, set of pdf files sitting in a folder in my project. All I need to do is to create a link to these PDF files and view them in browser or download it. I use React Router 4​  React Router v4: The Complete Guide React Router is the standard routing library for React. When you need to navigate through a React application with multiple views, you’ll need a router to

I tried squizz's way, but the problem I'm finding is that if you click the link more than once or twice, it will revert to going back to going to the last route.

You can make a folder in src to hold your pdf's, and link to them normally, ex:

import pdf from '../files/myfile.pdf'
render () {
    <a href={pdf}>Click here for my pdf</a>

The only problem is, you will get a hash appended to your file, so it will come out as myfile.d2e24234.pdf or something. I think it has to do with file-loader...currently trying to figure it out.


The answer if you don't want to use src is to delete the service worker from the create-react-app project. For some reason it affects react-router's handling of server routes.

I made a github issue here to read about it:

How to create and download a PDF client-side with react-router 4 , OS: Mac OSX 10.13.5 React-pdf version: 1.0.0-alpha.15 Description: I'm using react-router 4 in my SPA, and I was wondering if it's possible to  This mundane task fairly simple on static views, isn't complying with React. Can someone advise me how to open a pdf file as a href on a new tab? Here's my code using react-bootstrap and react-ro

Ran into this same issue and fixed it by resorting to old-fashioned html:

<a href="docs/document.pdf">

And copying the pdf to my publicly served folder with CopyWebpackPlugin in webpack.config:

plugins: [
    new CopyWebpackPlugin([
        from: 'docs/document.pdf',
        to: path.resolve(BUILD_PATH + "/docs/document.pdf")

react-pdf, Display PDFs in your React app as easily as if they were images. 76Versions · npm downloads build dependencies dev dependencies tested with jest This documentation is written for React-PDF 4.x branch. If you want to  I would like to add the functionality to let the users download the results in the form of a PDF. For example I have two components which are responsible for grabbing the question and data. <QuestionBox /> <ViewCharts /> I'm attempting to output both components into a PDF file. The user can then download this PFD file.

This worked for me:

    onClick={(event) => { event.preventDefault();; }}>
        Click to download

Open a PDF in React on the Web, However, at the time of writing, the latter is only used to create PDFs. react-pdf gives us a React-based component API for opening PDF files and rendering them  In this video we'll take a look at not only what code splitting is and how to do it, but also how to implement it with React Router. 🚀 Try our new 2019 React Course -

Download API Files With React & Fetch - yellowcode, How to download files like PDFs, XLS, and other provided by an API <h1 className="display-4 mt-4 mb-4">React File Downloader</h1> React Router is a collection of navigational components that compose declaratively with your application. Whether you want to have bookmarkable URLs for your web app or a composable way to navigate in React Native, React Router works wherever React is rendering--so take your pick!

React Router: Declarative Routing for React.js, It's a popular tool that works really well with React Router. First, install create-​react-app and make a new project with it. npm install -g create  then you would also need to include cMaps in your build and tell React-PDF where they are. Copying cMaps. First, you need to copy cMaps from pdfjs-dist (React-PDF's dependency - it should be in your node_modules if you have React-PDF installed). cMaps are located in pdfjs-dist/cmaps. Webpack. Add copy-webpack-plugin to your project if you haven

React Router v5: The Complete Guide, React Router is the de facto standard routing library for React. Each view in an application should have a URL that uniquely Alternatively, you can use Create React App to generate the files required for creating a basic  For change notes prior to version 4, please see the file. Funding. You may provide financial support for this project by donating via Open Collective, attending one of our workshops, or purchasing one of our online courses. Thank you for your support! About. react-router is developed and maintained by React Training and many amazing

  • you absolutely rescued me after 5 hours of hell! Thank you so much.
  • use this in your webpack config to get rid of the hash: use: 'file-loader?name=[path][name].[ext]'