使用 Netlify URL 部署的 React Redux 应用程序问题答案

【问题标题】：React Redux App Deployed with Netlify URLs issues使用 Netlify URL 部署的 React Redux 应用程序问题
【发布时间】：2018-09-28 13:58:45
【问题描述】：

我的问题很简单。我构建了一个 React Redux 应用程序并尝试在 Netlify 上部署它。一切正常，应用程序在线，安装 SSL 证书，显示根页面，域名...但是每当我尝试访问我的一条路由时，例如 myapp.com/login，我都会收到 404 错误。

您的帮助将是宝贵的，让我终于能够上线。

非常感谢，我希望我已经足够清楚了。

【问题讨论】：

标签： javascript reactjs netlify

【解决方案1】：

由于 React 应用程序中的路由是由 javascript 处理的，因此很可能您没有设置重定向规则。当您请求某个路由时，服务器找不到该路由，因为它不知道您的反应路由。您基本上必须将所有请求重新发送到您的 index.html 并让 react 处理所有路由。有一个关于如何为 netlify here 进行设置的指南

【讨论】：

【解决方案2】：

我怀疑您的问题出在 Netlify 上，因为正如 Martin 所解释的那样，路由本身会做出反应。最有可能发生的事情是您的父组件无权访问 react-router 道具，因此，每当 url 更改时，它都不会通过 shouldComponentUpdate。假设你有正确的语法，我会尝试用 withRouter 包装你的父组件，如下所示：

import {withRouter, Switch, Route} from 'react-router-dom'

class youComponent extends Component{
     constructor(props){
         super(props);
     }

     render(){
        let {teamName} = this.props;
        return(  
           <Switch>
               <Route path="/path2" component={ChildComponent} />
                ... other routes
               <Route path="/path3" render={(props) => <ChildComponent2 

teamName={teamName} />} />
              </Switch>
            )
      }
}

export default withRouter(yourComponent)

还要确保您的子组件可以访问 react-router-dom 的历史道具。有时历史道具不会传递给子组件。

【讨论】：