web-dev-qa-db-ja.com

React-Router v4-* url *を取得できません

反応ルーターv4を使い始めました。 app.jsにいくつかのナビゲーションリンクを含む簡単な<Router>があります（以下のコードを参照）。 localhost/vocabularyに移動すると、ルーターは正しいページにリダイレクトします。ただし、後でリロード（F5）を押すと（localhost/vocabulary）、すべてのコンテンツが消え、ブラウザーはCannot GET /vocabularyを報告します。そんなことがあるものか？誰かがそれを解決する方法を教えてくれますか（ページを正しくリロードしてください）？

App.js：

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
import { Switch, Redirect } from 'react-router'
import Login from './pages/Login'
import Vocabulary from './pages/Vocabulary'

const appContainer = document.getElementById('app')

ReactDOM.render(
  <Router>
    <div>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/vocabulary">Vocabulary</Link></li>
        </ul>
        <Switch>
          <Route exact path="/" component={Login} />
          <Route exact path="/vocabulary" component={Vocabulary} />
        </Switch>
    </div>
  </Router>,
appContainer)
javascriptreactjsrouteslocalhostreact-router
47
exoslav

Webpackを使用していると仮定しています。その場合、Webpack構成にいくつかの項目を追加すると問題が解決するはずです。具体的には、output.publicPath = '/'およびdevServer.historyApiFallback = true。以下は、^の両方を使用し、更新の問題を修正するwebpack構成の例です。 「理由」が気になる場合は、 this が役立ちます。

var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './app/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index_bundle.js',
    publicPath: '/'
  },
  module: {
    rules: [
      { test: /\.(js)$/, use: 'babel-loader' },
      { test: /\.css$/, use: [ 'style-loader', 'css-loader' ]}
    ]
  },
  devServer: {
    historyApiFallback: true,
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'app/index.html'
    })
  ]
};

これについては、ここで詳細に説明しました- Reactルーターでの更新時の「GET/URLを取得できません」エラーの修正（またはクライアント側ルーターの動作）

145
Tyler McGinnis

まだこれに苦労している人のためにタイラーの答えを補うために：

devServer.historyApiFallback: trueをWebpack構成に追加すると（publicPathを設定せずに）リフレッシュ/バック/フォワードで表示される404/Cannot-GETエラーが修正されましたが、ネストされたルートの1レベルのみです。つまり、「/」と「/ topics」は正常に機能し始めましたが、それを超えるもの（「/ topics/whatever」など）はまだ更新などで404をスローしました。

ここで受け入れられた答えに出くわしました： 予期しないトークン<反応するルーターコンポーネントのエラー そして、それは私に最後の行方不明のピースを提供しました。先頭の/をindex.htmlのバンドルスクリプトsrcに追加すると、問題は完全に解決しました。

14
Will Ashe

私は同じ問題を抱えていましたが、それを修正したのはpackage.jsonファイルを編集し、scripts: {の下で

"build": "webpack -d && copy src\\index.html dist\\index.html /y && webpack-dev-server --content-base src --inline --port 3000"

ウェブパックの最後にbuildコードを追加しました--history-api-fallbackこれはCannot GET /urlエラーに対する最も簡単な解決策のようにも見えました

注：--history-api-fallbackを追加してから次にビルドすると、出力に次のような行が表示されます（インデックスファイルが何であれ）。

404は/index.htmlにフォールバックします

3
Jared

Express（Webpackではない）を使用している場合、これはうまくいきました。

app.get('/*', function(req, res) {
  res.sendFile(path.join(__dirname, 'path/to/your/index.html'), function(err) {
    if (err) {
      res.status(500).send(err)
    }
  })
})
1
Marty McGee

Webpackを使用する場合、「contentBase」属性のサーバー構成の一部で構成を確認してください。この例で設定できます：

devServer: {
    ...
    contentBase: path.join(__dirname, '../')
    ...
}
1
Alex

また、... historyApiFallback: trueを追加することで成功しました。

devServer: {
        contentBase: path.join(__dirname, "public"),
        watchContentBase: true,
        publicPath: "/dist/",
        historyApiFallback: true
    }
1
SheldonO'Reilly

アプリケーションが静的ファイルサーバーでホストされている場合、の代わりにを使用する必要があります。

import { HashRouter } from 'react-router-dom'

ReactDOM.render((
  <HashRouter>
    <App />
  </HashRouter>
), holder)

https://github.com/ReactTraining/react-router/blob/v4.1.1/FAQ.md#why-doesnt-my-application-render-after-refreshing

0
jsina

私は同じ問題を抱えていましたが、webpackを再び停止して実行した後に修正されました。

0
Carlos Aleman