CODEWITHSUNDEEP
reactjsreact-router
Mitanshu
Mitanshu

Reputation: 869

React Router: change URL path on goBack()

There's a blog post on /post/public/:postId which is public. On this same page there is the edit button which goes to /edit/:postId page where user can change the post privacy from public to private.

After changing the post from public to private the previous URL /post/public/:postId becomes invalid and the new url is /post/private/:postId where we can see this post.

But on Edit page, after changing the privacy (which changes the post URL), click on Cancel button this.props.history.goBack() navigates back to public URL which is now invalid, hence results 404.

Is there a way I can update the goBack() url depending on if user changes privacy? I wish to navigate the users to the updated URL when privacy changes from public to private and vice versa.

P.s.: this.props.history.push() or this.props.history.replace() can temporarily fix the issue, but if the user will click on browser's default back button it will still go back to the invalid page.

Thanks!

Upvotes: 1

Views: 595

Answers (2)

Drew Reese
Drew Reese

Reputation: 202686

I think this is more a logical issue. When the user is on the public post page and navigates to edit the post, do a redirect here to the edit path.

  • A -> "/post/public/:postId" -> "edit" -> replace("/edit/:postId")
  • A -> "/edit/:postId"

They can now toggle the public/private mode of the post, and if/when they do a back navigation the will go back to the page they were on previously, i.e. A above.

  • A -> "/edit/:postId" -> "cancel" -> goBack()
  • A

If the user completes and, presumably, saves (or commit) the edit, then again, redirect to the correct private/public path.

  • A -> "/edit/:postId" -> "save" -> replace("/post/private/:postId")
  • A -> "/post/private/:postId"

The idea here is to keep the history stack valid by not keeping potentially "stale" paths in the history.

Upvotes: 1

nekromenzer
nekromenzer

Reputation: 342

    const [ locationKeys, setLocationKeys ] = useState([])
    const history = useHistory()

    useEffect(() => {
     return history.listen(location => {
      if (history.action === 'PUSH') {
       setLocationKeys([ location.key ])
      }

      if (history.action === 'POP') {
      if (locationKeys[1] === location.key) {
        setLocationKeys(([ _, ...keys ]) => keys)

        // Handle forward event

      } else {
        setLocationKeys((keys) => [ location.key, ...keys ])

        // Handle back event

      }
    }
  })}, [ locationKeys, ])

This may help you!

Upvotes: 0

Related Questions