ComponentDidMount did not fire after using Redirect in react-router

Question

so i was using redirect in react-router-dom, i have 2 pages, home and create when the form in create is done and has been submitted, it will execute the <Redirect> function, and it works, but the ComponentDidMount was not being fired again, i need to reload the page to make the ComponentDidMount to make it start again, here is my code

this is how i redirect in the Create file :

if(this.state.createNew){
        return <Redirect to='/home'/>
    }

and this is my ComponentDidMount in my Home file :

componentDidMount() {
    console.log("hi")
    }

the console print hi only on the initial render, when i redirect back to the page it does not fire again, i tried use setState inside the ComponentDidMount but it still not being re rendered.

when i tried using Link to method, it works, the ComponentDidMount is being fired again, but Link to is not what i want, because it does not automatically redirect like the <Redirect> do

i got an error when i try to use the useHistory function :

React Hook "useHistory" is called in function "simpan" which is neither a React function component or a custom React Hook function  react-hooks/rules-of-hooks

here is how i use my useHistory :

function simpan(event){
    event.preventDefault()
    const email = event.target.elements.email.value
    const name = event.target.elements.name.value
    const admin = event.target.elements.admin.value
    const active = event.target.elements.active.value
    const history = useHistory()
    console.log(email)
    history.push('/home')
}

thanks before, anyhelp will be appriciated

Red Baron · Answer 1 · 2020-06-10T06:48:19.490

1

instead of <Redirect /> why don't you use history.push('/home'). this will take you to the new route once state is true and call componentDidMount

how to use history:

import { useHistory } from 'react-router-dom'

then inside your component: const history = useHistory()

then whether you need to change the route:

history.push('/home')

edited Jun 10 '20 at 06:48

answered Jun 10 '20 at 06:41

Red Baron

7,181
10
39
86

history is not a function from `React-Router` am i correct ? – Walls Jun 10 '20 at 06:45
you can use `useHistory` hook if you are using `react-router` v5 – Red Baron Jun 10 '20 at 06:46
if you're using v4 then check this out: https://stackoverflow.com/questions/42701129/how-to-push-to-history-in-react-router-v4 – Red Baron Jun 10 '20 at 06:47
@Walls have edited my answer to show you how to use `useHistory` in v5 – Red Baron Jun 10 '20 at 06:48
i got an error when i try to use `useHistory`, i will update my question to show you my errors – Walls Jun 10 '20 at 06:55
sure. remember to include the error message too so I can help! – Red Baron Jun 10 '20 at 06:55
oh. it's coz you're using a class component. let me change my answer again for that. one sec – Red Baron Jun 10 '20 at 06:58
i have checked my version and a possible duplicate of react but i dont have any of it – Walls Jun 10 '20 at 06:58
are you able to change it to a functional component? instead of a class component – Red Baron Jun 10 '20 at 07:00
if you post your entire code for that class I can convert it for you – Red Baron Jun 10 '20 at 07:02
then you can use hooks – Red Baron Jun 10 '20 at 07:02
can we continue in chat ? – Walls Jun 10 '20 at 07:04
sure. how about posting your code in a sandbox or something? – Red Baron Jun 10 '20 at 07:05
hmm i dont think i can use a functional component for this one, sorry – Walls Jun 10 '20 at 07:05
you can always use a functional component :D they are better and more performant too. and will allow you to mondernise and use hooks which is "good practice" in React nowadays – Red Baron Jun 10 '20 at 07:06
ok i changed my code to a functional, here is my code, but i still got an error, i will update it – Walls Jun 10 '20 at 07:10
`simpan` isn't a functional component. it's just a function. you need to return something for it to be a functional component. why don't you call this function inside your functional component? – Red Baron Jun 10 '20 at 07:16

Gaurav Agam · Answer 2 · 2020-06-11T11:27:59.600

0

If your create is class component just use this.props.history.push("/home") instead of <Redirect> tag. As create component is your route it will automatically get history object in props. why to use history instead of redirect tag in your case

Simple example of programatic navigation with react routing Please check console of browser while checking this example

edited Jun 11 '20 at 11:27

answered Jun 10 '20 at 09:46

Gaurav Agam

32
6

the page does not change when i use this method, i still need to reload the page – Walls Jun 10 '20 at 12:40

ComponentDidMount did not fire after using Redirect in react-router

2 Answers2