web-dev-qa-db-fra.com

Afficher / télécharger des fichiers Pdf dans React - Router 4

J'ai un ensemble de fichiers pdf dans un dossier de mon projet.

Tout ce que je dois faire est de créer un lien vers ces fichiers PDF et les visualiser dans le navigateur ou les télécharger.

J'utilise React Router 4 et React 16 et l'outil de démarrage create-react-app).

Indépendamment de la façon dont je le relie (composant Link ou balise), il va toujours à ma dernière route dans ma configuration de routeur.

Je google depuis deux heures ... Mais pas de chance ..

Existe-t-il un moyen de dire au routeur de ne pas router pour les fichiers PDF/XLS?

Merci

reactjsreact-router-v4create-react-app
4
AnarchistGeek

J'ai rencontré le même problème, je pense que c'est à cause de la façon dont l'ARC gère les requêtes: j'ai fini par mettre mes fichiers PDF dans le dossier public et les lier en utilisant:

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

comme src à mes tags.

Ce n'est pas la meilleure façon, je suppose, mais ça marche assez bien ...

5
squizz

J'ai essayé la méthode de squizz, mais le problème que je trouve est que si vous cliquez sur le lien plus d'une ou deux fois, il reviendra à revenir à la dernière route.

Vous pouvez créer un dossier dans src pour contenir vos fichiers PDF et les lier normalement, par exemple:

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

Le seul problème est que vous obtiendrez un hachage ajouté à votre fichier, il apparaîtra donc sous la forme myfile.d2e24234.pdf ou quelque chose du genre. Je pense que cela a à voir avec le chargeur de fichiers ... essayant actuellement de le comprendre.

[~ # ~] modifier [~ # ~]

La réponse si vous ne souhaitez pas utiliser src est de supprimer le technicien de service du projet create-react-app. Pour une raison quelconque, cela affecte la gestion par le routeur de réaction des routes du serveur.

J'ai fait un problème avec github ici pour en savoir plus: https://github.com/facebookincubator/create-react-app/issues/3608

15
Link_Cable

Ran dans ce même problème et corrigé en recourant à l'ancien HTML:

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

Et en copiant le pdf dans mon dossier public avec CopyWebpackPlugin dans webpack.config:

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