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

问题描述

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

403 禁止

代码:拒绝访问消息:访问被拒绝请求 ID:075CAA73BDC6F1B9主机 ID:O1n36xVCoeu/aLaSMrtCkAFZruWk5ZcO4RIrznEhvUxdu8lFEhL0XcKw2L4W4J7VYYet+HDv8tc=

请记住，只要我不刷新，路线就可以正常工作.
所以假设我去 / (主页).在它上面，我有一个 超链接，它映射到我的 react-router 路由中的路径 /login.我单击超链接，它工作正常，根据我的反应路由器路由在反应中呈现/login 控件.只有当我刷新我所在的任何页面时才会出现上述错误.

此外，当我同步我的存储桶时，我将公开读取它，所以不确定为什么我会收到此权限错误:

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

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

 <布局><开关><Route component={Home} 精确路径='/'/><ProtectedRoute 组件={DashboardContainer} path='/dashboard'/><路由组件={LoginContainer} path='/login'/><路由组件={NotFound} path='*'/></开关></布局></提供者>

登录容器

 import { connect } from 'react-redux'导入 React, { Component } from 'react'const _ = require('lodash')...从'../components/auth/Login/Login'导入登录类 LoginContainer 扩展组件 {构造函数(道具){超级(道具)this.handleEmailInput = this.handleEmailInput.bind(this)... 其余的处理程序}异步 handleLoginPressed(e) {e.preventDefault()this.validateForm()等待 this.props.authenticate(this.state.email, this.state.password)如果(this.props.isAuthenticated){this.props.history.push('/dashboard')返回}... 更多代码使成为(){返回(<div><登录登录={this.handleLoginPressed}/>

)}}const mapStateToProps = state =>({令牌:state.auth.token})导出 const mapDispatchToProps = {身份验证:AuthAsyncActions.authenticate}导出 { 登录 }导出默认连接(mapStateToProps，mapDispatchToProps)(LoginContainer)

现在我已经遗漏了一堆重复的代码，这基本上表明我在这里唯一的路由是如果他们成功登录，他们将被重定向到/dashboard.我的问题不在于，重定向工作正常.每当我刷新我所在的任何页面时，它都不会再次重新路由.

解决方案

这是因为您的服务器试图直接转到该 url.您有两个选择:

1. 使用 react-router v4 提供的哈希路由器.路由现在看起来像这样:http://example.com/#/somePage

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

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 Forbidden

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

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)

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.

解决方案

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

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

2. 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屋！