Question

我可能缺少历史记录或其他内容，但当我刷新子路由（例如/login）或我获得的任何其他路线时，

403 Forbidden

代码：AccessDenied 消息：访问被拒绝 RequestId：075CAA73BDC6F1B9 HostId：O1n36xVCoeu / aLaSMrtCkAFZruWk5ZcO4RIrznEhvUxdu8lFEhL0XcKw2L4W4J7VYYet + HDv8tc =

请记住，只要我不刷新，路线就可以正常工作所以我想说我去/（主页）。在它上面，我有一个超链接，它映射到我的react-router路由中的路径/login。我单击超链接，它工作正常，根据我的react-router路由呈现/ 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。我的问题不是，重定向工作正常。每当我在任何页面上刷新时，它都不会再次重新路由。

Answer 1

这是因为您的服务器尝试直接转到该网址。您有两种选择：

使用react-router v4提供的hash router。路线现在看起来像这样：http://example.com/#/somePage
如果您不想在网址上添加＃，则必须更改服务器行为。对于不同的服务器，此配置会发生变化。在开发模式下，如果您使用webpack-dev-server，只需启用historyApiFallback。在生产模式下，搜索如何使用您将使用的服务器重定向403/404响应。

Answer 2

客户端和服务器端路由之间存在差异。这已被广泛的帖子和其他地方所涵盖。基本上，如果您的客户端反应应用程序将它们重定向到某个路由，这与他们在浏览器中手动输入该路由（与服务器联系并尝试获取该SPECIFIC路由）不同。

因此，如果您在前端有路线，请说：

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

但是在你的后端，你没有处理对所述路径的请求的东西，然后手动转到该URL或刷新该URL时会导致你的应用程序自行停止。

确保在后端捕获所有路线，如下所示：

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

基本上，捕获只返回index.html的所有路由

另外一定要查看客户端与服务器端路由，这将导致页面刷新问题，并使用React Router手动导航到某些URL

Answer 3

当我将create-react应用程序部署到heroku时，我遇到了类似的问题，应用程序工作正常，直到在子路由上刷新。我修复它的方法是在我的根目录中添加此文件。不确定这是否会对你有帮助。

static.json

{
  "root": "build/",
  "clean_urls": false,
  "routes": {
    "/**": "index.html"
  }
}

React-router v4页面刷新不起作用

3 个答案: