ReactJS form submit this.props.history.push('/downloads') not linking through to the new page

Question

I am trying to Push to a new page once a user has filled out a form using this.props.history.push inside the function below.

  handleSubmit = async event => {
    event.preventDefault()
    try {
      const res = await newEnquiry(this.state.formData)
      this.props.history.push('/downloads')
      console.log(res)
    } catch (err) {
      console.log(err.response.data)
    }
  }

The ReactJS form is working fine on the /contacts page, and submits information to my Django back-end so I know it's working OK, however I cannot get the redirect to work and it's giving me this error message.

<form onSubmit={this.handleSubmit}> is inside my form tag and that's working fine so I am pretty sure it's not a problem with my form.

Api.js

const baseUrl = '/api'

export const newEnquiry = formData => {
  return axios.post(`${baseUrl}/enquiries/`, formData)
}

Views.py

class EnquiryListView(APIView):

    def get(self, _request):
        enquiries = Enquiries.objects.all() 
        serialized_enquiries = EnquirySerializer(enquiries, many=True)
        return Response(serialized_enquiries.data, status=status.HTTP_200_OK)

    def post(self, request):
        created_enquiry = EnquirySerializer(data=request.data)
        if created_enquiry.is_valid():
          created_enquiry.save()
          return Response(created_enquiry.data, status=status.HTTP_201_CREATED)
        return Response(created_enquiry.errors)

serializers.py

class EnquirySerializer(serializers.ModelSerializer):

      class Meta:
        model = Enquiries
        fields = '__all__'

score 1 · Accepted Answer · answered Sep 16 '20 at 11:05

1

In your case of this problem, when the error fires off, it is unable to read the err.response.data property. If there was no error, it would redirect you. In your Django app, check what the error handler is suppose to return.

Quick review of try/catch.

try {
 // if everything passes, run this block
} catch (err) {
 // if something goes wrong, run this block
}

In this case, be sure to check what your full error is. It might be a 404 or something totally unexpected.

answered Sep 16 '20 at 11:05

Nano Adam

285
1
5

Thanks Nano. I can see the submitted data in Django app, so it has successfully Put that information. Even with this happening it's not redirecting. – HYDE Sep 16 '20 at 11:36
Could you paste the code of the Django app for this particular route? For sure something has went wrong because JavaScript doesn't give an error for no reason. . – Nano Adam Sep 16 '20 at 11:59
Thanks, I've added my code into the main code at the top of the page. Is this what you required? – HYDE Sep 16 '20 at 12:02
When you get the error in React. What error do you get in the console? Replace `err.response.data` with just `err` so we can see full picture. If `.data` is unavailable, it might be 404 or something similar. – Nano Adam Sep 16 '20 at 12:05
TypeError: Cannot read property 'push' of undefined at Form.handleSubmit (Form.js:30) – HYDE Sep 16 '20 at 12:07
Is Form.js the one linked inside of ReactRouterDOM? Like ``? If not, then you would need to pass it in via props, since you are using class-based components – Nano Adam Sep 16 '20 at 12:22
Thanks, I'm not sure how I would do that. What do you mean by linked inside of ReactRouterDom? My App.js page has this installed import { BrowserRouter, Switch, Route } from 'react-router-dom' so I can't workout what edit I would need to make to the code to pass this down. Can you help? – HYDE Sep 16 '20 at 12:47
Could you add App.js which your components shown, so I can see your component/routes structure? – Nano Adam Sep 16 '20 at 12:55
import { BrowserRouter, Switch, Route } from 'react-router-dom' -- does this help? – HYDE Sep 16 '20 at 13:00
Sorry for the long wait. I created a example GitHub gist https://gist.github.com/nanoproductions/9f422e7b6cc00282fce57b758cbcd6ed. Feel free to explore it and learn it of what's going on. – Nano Adam Sep 16 '20 at 13:15
Thank you, I'm sorry I don't understand based on your GitHub gist. – HYDE Sep 16 '20 at 13:34
Do you have a git repo? I need the component App.js so I can see your route structure, and give you specific examples. – Nano Adam Sep 16 '20 at 13:41
I managed to fix it by using the outside of the submit button. I know it's not the correct way, but it's working. Thank you for all your help, I really appreciate it. – HYDE Sep 16 '20 at 13:53
You could try component. Check this thread out: https://stackoverflow.com/questions/43837212/this-props-history-push-works-in-some-components-and-not-others – Nano Adam Sep 16 '20 at 14:03
Thank you Nano, much appreciated. The idea I tried earlier didn't quite work, as it doesn't submit my data into the backend. Here's a link to the up to date repo: https://github.com/atkinsl88/Park-House-SEI-Project-004 Thanks again, and sorry for the delay. Enquiries is where my form is (Form) and then my main project is in the 'project' folder. – HYDE Sep 16 '20 at 16:40
Here is what you should do now. **Contact.js** `` Then in Twocolform you iwll get access to history! – Nano Adam Sep 16 '20 at 17:58
Thank you, that's fixed things. Really appreciate your help. – HYDE Sep 17 '20 at 11:11

ReactJS form submit this.props.history.push('/downloads') not linking through to the new page

1 Answers1