Question

我已经在AWS amplify中部署了一个react应用。它在本地主机上运行良好，但是部署后好像React路由器没有按预期工作。即，当手动输入链接时，它将重定向到index.html页。此外，尽管我提到了event.preventDefault()，但在提交表单时，页面仍重定向到index.html

App.js

return (
    <Router>
    <div className="App">

    <Switch>



    <Route exact path="/SignUp" component={SignVerification}/>

    <Route exact path="/" component={()=><Home BlogInfo={this.state.BlogInfo} onAddUpvote={this.addUpvote} onAddPost={this.addPost}/>} />

        <Route exact path="/One/:id" render={(params)=>(<Single BlogInfo={this.state.BlogInfo}{...params} />)}/>


  </Switch>


    </div>

    </Router>
  );
}
}

Post.js

  handleSubmit=(event)=>
{

  axios.post("https://3em19ts012.execute-api.us-east-2.amazonaws.com/Dev/comment",

    {Comment :this.state.comments,
    PostId:this.props.match.params.id,
    Time:new Date(),
    Username:userPool.getCurrentUser().getUsername(),
    ParentId:"None"
    }      

).then((response) => {
  var data={comment:response.data.message.Comt.S,
    Username:response.data.message.Username.S
    };
    this.setState({commentInfo:[data,...this.state.commentInfo]})

  });









  event.preventDefault();


this.setState({comments:""})



}

Answer 1

AWS收到请求并返回404时，似乎将重定向（302）放大到index.html。

我可以想到两种解决方案：

使用HashRouter代替BrowserRouter。或
配置AWS放大以在收到200 redirects (rewrites)时发送404

在AWS ampify中部署后，页面在提交后重定向到index.html

1 个答案: