阵营路由器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页面刷新不工作

回答

相关问题