パスで直接アクセスする、またはページをリフレッシュするリアクタ・ルータ・エラー

Question

リア・ルータを問題なく実装しました。正常に動作していますが、何らかの理由でユーザがページをリフレッシュするか、 GET/GETできないようなエラー（GET /ブログはできません）が表示されています。

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { Router, Route, browserHistory } from 'react-router'; 
import { Provider } from 'react-redux'; 
import store from 'store'; 

// Layouts 
import App from 'layouts/app'; 

// Components 
import Portfolio  from 'ui/portfolio'; 
import BlogContainer from 'ui/blog-container'; 
import TimeLine  from 'ui/timeline'; 
import About   from 'ui/about' 
import Contact  from 'ui/contact' 

ReactDOM.render((
    <Provider store={store}> 
    <Router history={browserHistory}> 

     <Route component={App}> 
      <Route path="/" component={Portfolio} /> 
      <Route path="/blog" component={BlogContainer} /> 
      <Route path="/timeline" component={TimeLine} /> 
      <Route path="/about" component={About} /> 
      <Route path="/contact" component={Contact} /> 
     </Route> 

    </Router> 
    </Provider> 
), document.getElementById('root')); 

私はそれを修正することができますどのように任意のアイデア：以下

はコードです。

Note: dependencies I am using 
    "react": "^0.14.3", 
    "react-dom": "^0.14.3", 
    "react-redux": "^4.0.6", 
    "react-router": "^2.0.0", 
    "redux": "^3.3.1" 

Answer 1

問題は、サーバーのルーター（nginxの、Apacheが...）返すために、ブラウザにどのようなコンテンツを配信するのか分からないということです。あなたのアプリはすでにあなたがnginxのを使用している認め、バンドルされている唯一のフロントエンドアプリであれば、基本的に、あなたのサーバの設定のこの種のものが必要です。

server { 

    location/{ 
     try_files $uri /your/index.html; # the path to your html page 
    } 
} 

その後、あなたは直接移動しようとするとき、あなたのサーバーは常にあなたのJavaScriptバンドルを含むhtmlページを返し、残りの部分はreact-routerが処理しなければなりません。

はreact-router

Answer 2

あなたのルートから「/」を削除してください。コンポーネントを直接呼び出します。 例： {

<Route component={ App } path='/master'> 
     <Route path = 'board' component={BoardView} /> 
     <Route path = 'team' component={View} /> 
     <Route path = 'all' component={All} /> 
     <Route path = 'shots' component={Shots} /> 
     <Route path = 'home' component={Home} /> 
     <Route path = 'topper' component={Toppers} /> 
     <Route path = 'overlay' component={Overlay} /> 
     <Route path = 'earn' component={Earn} /> 

}