web-dev-qa-db-ja.com

Reactアプリのビルド後にルーターが機能しない

私はreactとreact-routerが初めてです。アプリは create-react-app を使用して作成されます。メインページが2つあるアプリにルーティングを実装する必要があります。私は多くのオプションを試してみて、最終的に次のコードで動作するようにしました。

このコードは、開発時には問題なく機能します。しかし、アプリをビルドした後、正しく機能しません。 404ページへのルートが表示されるだけです。これを解決するのを手伝ってください。

<Router history={browserHistory}>
  <Route component={Root}>
    <IndexRoute component={App} />
    <Route path="/" component={App} />
    <Route path="/sna/:country" component={SNA} />
    <Route path="*" component={FourOFour}/>
  </Route>
</Router>

以下のコードを使用して、ドロップダウンの変更時にナビゲーションを有効にするためにbrowserHistoryを使用しました。

selectCountry(event){
    var value = event.target.value;
    browserHistory.Push('/sna/' + value);
}

package.json

  {
  "name": "my-app",
  "version": "0.1.0",
  "homepage": "./",
  "private": true,
  "dependencies": {
    "bootstrap": "^3.3.7",
    "react": "^15.4.2",
    "react-addons-update": "^15.4.2",
    "react-bootstrap": "^0.30.8",
    "react-data-grid": "^2.0.24",
    "react-dom": "^15.4.2",
    "react-router": "^2.6.0"
  },
  "devDependencies": {
    "react-scripts": "0.9.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}
javascriptreactjsnpmbuildreact-router
8
Lini Susan V

でスタックした後react-router数日間、私は React Training のドキュメントを読みました。次に、クイックスタート手順に従い、要件を満たすように変更しました。

import {
  HashRouter as Router,
  Route,
  } from 'react-router-dom';

  <Router>
    <div>
      <Header />
      <Route exact path="/" component={Content} />
      <Route path="/:country" component={SnaContent} />
      <Footer />
    </div>
  </Router>

これは今のところ問題を修正しています。同様の問題に直面した他の人に役立つことを願っています。

8
Lini Susan V

これはApache関連の問題です

Apacheサーバーがすべてのリクエストをindex.htmlファイルにリダイレクトすることを確認してください。次のコードが.htaccessにあることを確認してください

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
5
Matteus Barbosa

ReactアプリをFirebase Hostingにデプロイしたとき、私は最初に同様の問題がありました。

問題は実際には受け入れられた回答の投稿者が示唆したように、react-routerではないであることが判明しました。 HashRouterは、URLの前に/＃/を追加します。これは、何があっても、本当にきれいに見えません。

私が使用しているweb hosting serviceに問題があることがわかりました。 デフォルトのHTMLファイルを指定レンダリングする必要がありますindex.htmlです。

これは、ホスティングサービスプロバイダー（AmazonのS3/Apache/Google Cloud Platform（GCP）のApp Engine/Firebase Hostingなど）がどのHTMLファイルを認識していないために発生しますデフォルトのURL（ https://www.link_to_your_website.com ）以外のURLが指定された場合にレンダリングするたとえば、 https://www.link_to_your_website.com/login を認識できません。

Firebase Hostingでは、次のことを行う必要があります。

"rewrites": [ {
    "source": "**",
    "destination": "/index.html"
}]

Apacheの.htaccessでは、次のようにする必要があります。

FallbackResource /index.html

ソース： エラー404を.htaccessでホームページにリダイレクトする方法

React-RouteはHTML DOMのツリーを新しいReact要素で動的に更新するため、これらのコマンドはindex.htmlをレンダリングするように指示します。

この同様の問題に直面した人がこれが役立つことを願っています。

1
erwinleonardy

これを試して、次のようにルーティングを定義します。

<Router history={browserHistory}>
   <Route path="/" component={Root}>
      <IndexRoute component={App} />
      <Route path="/sna/:country" component={SNA} />
      <Route path="*" component={FourOFour}/>
   </Route>
</Router>

理由：path="/"によってメインルートRootへのパスを定義する必要があり、Appコンポーネント用に個別のルートを定義する必要はありません。これはすでにIndexRouteです。 /に移動すると、Appコンポーネントがレンダリングされます。

0
Mayank Shukla

私にとって、Lili Susan Vの解決策はこのコードで私のために機能します：

import { HashRouter as Router } from 'react-router-dom';
0
prodriguezl