陣營路由器V4頁面刷新不工作

我可能丟失的歷史什麼的，但是當我刷新在子路徑的頁面，如/login或任何其他途徑獲得：陣營路由器V4頁面刷新不工作

403禁止

代碼：存取遭拒消息：拒絕訪問的requestId：075CAA73BDC6F1B9 主機ID：O1n36xVCoeu/aLaSMrtCkAFZruWk5ZcO4RIrznEhvUxdu8lFEhL0XcKw2L4W4J7VYYet + HDv8tc =

記住路線做工精細，只要我不刷新。
因此，可以說，我去/（主頁）。就可以了，我有一個超鏈接映射到路徑/login在我的反應路由器的路由。我點擊超鏈接，它工作正常，根據我的反應路由器路線呈現/ login控制反應。 只有當我刷新任何頁面時，我纔會看到上面的錯誤。

此外，當我同步我鬥我把公共讀就這麼不知道爲什麼我得到這個權限錯誤：

aws s3 sync --acl public-read build s3://${bkt}

這裏的一些線路和組件的例子：

 <Provider store={store}> 
     <Layout> 
      <Switch> 
      <Route component={Home} exact path='/' /> 
      <ProtectedRoute component={ 
DashboardContainer} path='/dashboard' /> 
      <Route component={LoginContainer} path='/login' /> 
      <Route component={NotFound} path='*' /> 
      </Switch> 
     </Layout> 
     </Provider>

LoginContainer

import { connect } from 'react-redux' 
    import React, { Component } from 'react' 
    const _ = require('lodash') 

... 

    import Login from '../components/auth/Login/Login' 

    class LoginContainer extends Component { 
     constructor(props) { 
     super(props) 

     this.handleEmailInput = this.handleEmailInput.bind(this) 
     ... rest of the handlers 
     } 


     async handleLoginPressed(e) { 
     e.preventDefault() 
     this.validateForm() 

     await this.props.authenticate(this.state.email, this.state.password) 
     if(this.props.isAuthenticated) { 
      this.props.history.push('/dashboard') 
      return 
     } 

     ... more code 

     render(){ 
     return(
      <div> 
      <Login 
       login={this.handleLoginPressed} 
      /> 
      </div> 
     ) 
     } 
    } 

    const mapStateToProps = state => ({ 
     token: state.auth.token 
    }) 

    export const mapDispatchToProps = { 
     authenticate: AuthAsyncActions.authenticate 
    } 

    export { Login } 
    export default connect(mapStateToProps, mapDispatchToProps)(LoginContainer)

現在，我已經離開了一堆重複的代碼，這基本上顯示在這裏我唯一擁有的路由，如果他們成功登錄，他們重定向到/dashboard。我的問題不是，重定向工作正常。這是每當我在刷新任何頁我在，就不會再次重新路由。

來源

2017-07-11 PositiveGuy

如何在地獄這樣做得到downvoted – PositiveGuy

有客戶端和服務器端的路由之間的差異。這已經涵蓋在一個廣闊的職位和其他地方。基本上，如果您的客戶端應用程序的反應他們重定向到一個特定的路線，這是不一樣的他們手動輸入該路由的瀏覽器（這與服務器聯繫，並試圖獲得特定的路線）。

所以，如果你有在前端的路線，說：

<Route component={Potato} exact path='/potato' />

但在你的後端你沒有的東西，其處理請求說路徑，然後手動去那個URL或刷新當在該URL上會導致你的應用程序自行停靠。

確保你有一個catch在你的後端的所有路線，像這樣：

app.get('*', (request, response) => { 
    response.sendFile(path.resolve(__dirname, 'index.html')) 
});

本質，一個鎖釦，只是返回您的index.html

此外，一定要看看所有航線客戶端和服務器端的路由，這將導致頁面刷新問題，並通過React路由器手動導航到某些URL。

來源

2017-07-11 09:38:46 Jayce444

仍然無法弄清楚如何應用命令，我不想要的東西複製到現有S3網站鬥 – PositiveGuy

我增加了更多的信息。請重新閱讀 – PositiveGuy

這是因爲您的服務器試圖直接訪問該URL。您有兩種選擇：

使用react-router v4提供的hash router。現在，路由將如下所示：http://example.com/#/somePage
如果您不想在網址上擁有＃號，則必須更改服務器行爲。此配置針對不同服務器進行更改。在開發模式下，如果您使用的是webpack-dev-server，請啓用historyApiFallback。在生產模式下搜索如何使用您將使用的服務器重定向403/404響應。

來源

2017-07-12 09:28:14 arracso

我正在使用create-react-app – PositiveGuy

create-react-app使用webpack進行製作，並使用webpack-dev-server進行開發。轉到webpack-dev-server的配置文件（只需查看package.json中名爲start的npm腳本，您將看到配置文件的路徑），然後在devServer中添加'historyApiFallback：true，'。那只是爲了發展。一旦你完成你的項目，你將不得不弄清楚如何配置你將要使用的服務器。（或者正如我所說的，只是使用hashRouter） – arracso

它在開發中工作正常，所以我不需要惹惱create-react-app的魔法。這隻有在我部署到AWS（開發）時纔會發生。我不確定在我們的開發分支的aws上設置了什麼NODE_ENV，但是我們正在運行PR'd分支的S3部署 – PositiveGuy

陣營路由器V4頁面刷新不工作

回答

相關問題