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
– Samuel Vaillant

2020-04-10 08:57:18 +00:00
Commented Apr 10, 2020 at 8:57 — Samuel Vaillant
– Samuel Vaillant, Commented Apr 10, 2020 at 8:57
The latest version 5.1.2

Johann
– Johann

2020-04-10 09:02:47 +00:00
Commented Apr 10, 2020 at 9:02 — Johann
– Johann, Commented Apr 10, 2020 at 9:02

Barry Michael Doyle · Accepted Answer · 2020-04-10 09:06:22Z

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, 2020 at 9:06

answered Apr 10, 2020 at 8:59

Barry Michael Doyle

10.8k33 gold badges98 silver badges161 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Johann Over a year ago

Does "push" do a redirect or just "push" the url onto the history stack?

Barry Michael Doyle Over a year ago

It pushes it onto the history stack, but you could also use history.replace to accomplish that "redirect" functionality.

Collectives™ on Stack Overflow

Using React Router functionality outside the rendering

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related