React-Router v4页面刷新不起作用 [英] React-router v4 Page Refresh Not Working

问题描述

我可能缺少历史记录或某些内容，但是当我刷新子路由(例如/login 或任何其他路由)上的页面时，我得到了:

I am probably missing history or something but when I refresh a page on a sub route such as /login or any other routes I get:

403禁止

代码:AccessDenied消息:访问被拒绝RequestId:075CAA73BDC6F1B9HostId:O1n36xVCoeu/aLaSMrtCkAFZruWk5ZcO4RIrznEhvUxdu8lFEhL0XcKw2L4W4J7VYYet + HDv8tc =

Code: AccessDenied Message: Access Denied RequestId: 075CAA73BDC6F1B9 HostId: O1n36xVCoeu/aLaSMrtCkAFZruWk5ZcO4RIrznEhvUxdu8lFEhL0XcKw2L4W4J7VYYet+HDv8tc=

请记住，只要我不刷新，路线就可以正常运行.
因此，可以说我去了/(主页).在它上面，有一个超链接，它映射到我的react-router路由中的路径/login .我单击超链接，它可以正常工作，并根据我的react-router路由在react中渲染/login控件.只有当我刷新所访问的任何页面时，我才会收到上面的错误.

Keep in mind the routes work fine as long as I don't refresh.
So lets say I go to / (the homepage). On it, I have a hyperlink that maps to the path /login in my react-router routes. I click the hyperlink, it works fine, renders the /login control in react based on my react-router routes. It's only when I refresh any page I'm on that I get the error above.

当我同步我的存储桶时，我也会在其上公开阅读，因此不确定为什么会出现此权限错误:

Also when I sync my bucket I'm putting public read on it so not sure why I'm getting this permission error:

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

这是一些路线和组件的示例:

Here's an example of some routes and a component:

      <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 .我的问题不是，重定向可以正常工作.每当我在自己所在的任何页面上刷新时，它都不会再次重新路由.

Now I've left out a bunch of repetitive code and this shows basically the only thing in here I have for routing is if they successfully log in, they're redirected to /dashboard. My problem isn't that, redirect works fine. It's whenever I refresh on any page I'm on, it doesn't re-route again.

推荐答案

这是因为您的服务器尝试直接转到该URL.您有两种选择:

This is because your server tries to go to that url directly. You have two options:

1. 使用react-router v4提供的哈希路由器.现在的路线将如下所示: http://example.com/#/somePage

1. Use the hash router provided by react-router v4. Routes now will look like this: http://example.com/#/somePage

如果您不希望在URL上使用#号，则必须更改服务器行为.对于不同的服务器，此配置会更改.在开发模式下，如果您使用的是webpack-dev-server，则只需启用 historyApiFallback .在生产模式下，搜索如何使用您将使用的服务器重定向403/404响应.

If you don't like to have a # on the url you have to change the server behaviour. This configuration changes for diferents servers. In development mode if you are using webpack-dev-server just enable historyApiFallback. In production mode search for how to redirect 403/404 responses using the server you will use.

这篇关于React-Router v4页面刷新不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！