反應路由器錯誤直接訪問路徑或刷新頁面

我已經實現react-router沒有任何問題，它工作正常，但出於某種原因，在用戶刷新頁面或嘗試直接訪問不同的情況下主要的一個頁面的路徑我得到一個錯誤，如不能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"

來源

2016-04-13 gon250

，你能否告訴我們'ReactDOM.render'前行？ – KeitIG

done :) @KeitIG – gon250

添加一個，除了根路徑之外，還從路由中刪除'/'。 –

的問題是，你的服務器的路由器（nginx的，阿帕奇......）不知道是什麼返回，並交付給你的瀏覽器上的內容。基本上，如果你的應用程序僅僅是你已經綁定，承認你使用nginx的前端應用程序，你需要這樣的配置爲您的服務器：

server { 

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

然後，當你將嘗試直接去到一個路由，你的服務器將總是返回包含你的javascript包的html頁面，並且react-router應該處理其餘的。

見browserHistory documentation的react-router

來源

2016-04-13 15:08:19 KeitIG

從您的路線中刪除'/'。直接調用組件。如： {

<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} />

}

來源

2016-04-13 10:50:47

我讓你的改變不起作用。位置「/ blog」與任何路線都不匹配，我使用'react-router'中的{Link}來生成鏈接。 – gon250

反應路由器錯誤直接訪問路徑或刷新頁面

回答

相關問題