Using React Router functionality outside the rendering

Question

I noticed that in all the examples provided by the React Router, it uses the Router objects as part of the UI that gets rendered. But I have a situation where I need to use the Redirect object outside of the rendering code. I have a set of tabs and when the user clicks on a tab, I need to redirect to a different url.

I came across one location in the Router documentation that did show how to use the Router object as part of the normal Javascript code that is not part of the rendering but I could not find it again. In essence I want to do something like this:

function doRedirect() {
    return  (<Redirect to={"/" + user.username + "/projects"} />);
}

But this will fail to compile. How can I use the Redirect functionality using the angled brackets inside of normal Javascript code?

Which version of React Router are you using? – Samuel Vaillant Apr 10 '20 at 08:57 — Samuel Vaillant, Apr 10 '20 at 08:57

Barry Michael Doyle · Accepted Answer · 2020-04-10T09:06:22.253

2

You could use the useHistory hook, then just history.push(url) or history.replace(url) like this:

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

const MyComponent = ({ user }) => {
   const history = useHistory()

   function handleClick() {
     history.replace(`/${user.username}/projects`)
   }

   return (
     <button onClick={handleClick}>Redirect to Projects</button>
   )
}

This is just an example, but obviously you can use this with quite a lot of flexibility.

See this question for push vs replace

edited Apr 10 '20 at 09:06

answered Apr 10 '20 at 08:59

Barry Michael Doyle

9,333
30
83
143

Does "push" do a redirect or just "push" the url onto the history stack? – Johann Apr 10 '20 at 09:03
It pushes it onto the `history` stack, but you could also use `history.replace` to accomplish that "redirect" functionality. – Barry Michael Doyle Apr 10 '20 at 09:05

Using React Router functionality outside the rendering

1 Answers1