web-dev-qa-db-ja.com

React-ルーター4のPDFファイルを表示/ダウンロード

プロジェクトのフォルダーにPDFファイルのセットが置かれています。

私がする必要があるのは、これらのPDF=ファイルへのリンクを作成し、ブラウザで表示するかダウンロードすることだけです。

React Router 4とReact 16およびcreate-react-appブートストラップツールを使用しています。

リンク方法（リンクコンポーネントまたはタグ）に関係なく、ルーター構成の最後のルートに移動します。

私は最後の2時間グーグルしてきました...しかし、運はありません。

PDF/XLSファイルをルーティングしないようにルーターに指示する方法はありますか？

ありがとう

reactjsreact-router-v4create-react-app
4
AnarchistGeek

私は同じ問題に遭遇しました、それはCRAがクエリを処理する方法が原因であると思います：PDFファイルをパブリックフォルダーに入れ、それらを使用してそれらにリンクしました：

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

私のタグへのsrcとして。

私が推測する最良の方法ではありませんが、十分にうまくいきます...

5
squizz

私はsquizzの方法を試しましたが、私が見つけた問題は、リンクを2回以上クリックすると、最後のルートに戻ることに戻るということです。

srcにフォルダーを作成してpdfを保持し、通常はそれらにリンクできます。例：

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

唯一の問題は、ファイルにハッシュが追加されるため、myfile.d2e24234.pdfなどとして出力されることです。私はそれがファイルローダーに関係していると思います...現在それを理解しようとしています。

[〜＃〜]編集[〜＃〜]

Srcを使用したくない場合の答えは、create-react-appプロジェクトからService Workerを削除することです。何らかの理由で、react-routerによるサーバールートの処理に影響します。

それについて読むためにここにgithubの問題を作りました： https://github.com/facebookincubator/create-react-app/issues/3608

15
Link_Cable

これと同じ問題にぶつかり、昔ながらのhtmlに頼ることで修正しました。

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

そして、webpack.configのCopyWebpackPluginを使用して、pdfを私の公開フォルダーにコピーします。

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