react-router v4: triggering a redirect programmatically (without having to render a <Redirect / >)

Question

I'm currently switching my web app to react. The old one is located here.

What I'm trying to do is: when an user enter a player's username into the text field and submit, the app would redirect to the corresponding route (/:username), and the text field is cleared.

In the react version, this is what I'm doing currently: https://github.com/AVAVT/g0tstats-react/blob/master/src/components/SideBar/SearchBox.js

submit(event){
    ...

    this.setState({
      redirect : true
    });

    ...
}

And

render(){
    ...
    {
          this.state.redirect && (
          <Redirect to={`/${this.state.username}`} push />
          )
    }
}

Which kinda work. But there are 2 things I don't like about it:

I'm rendering an element in order to redirect. It feels stupid and roundabout. It stinks of potential bug in the future.
I'm stuck with the text field not cleared. Because I if I set state.username to null the <Redirect /> component will not redirect correctly. In fact I don't have any precise control over when the redirection occur (unless I do it in another roundabout way).

I have searched for alternative, but couldn't find one. withRouter doesn't work because <SearchBox /> is not a <Route /> and doesn't receive the history props.

So how can I say "redirect me to that place NOW" in react-router v4?

What about sending the routing props down from component that is rendering your <SearchBox />? Presumably if its not the one getting the props since its not directly being routed to, then its parent which is being routed to should. — Chaim Friedman
– Chaim Friedman, Commented Jun 13, 2017 at 23:13
this.context.transitionTo(...) is how you do programmatic redirect if I'm reading what your question correctly. — 1252748
– 1252748, Commented Jun 13, 2017 at 23:16
@promisified Actually no, the SearchBox's inside the sidebar, which is a siblings of the <Route>s — AVAVT
– AVAVT, Commented Jun 13, 2017 at 23:17
@1252748 if you can show me a working example I'd be much appreciated. I have tried many thing the past few days, this.context included. — AVAVT
– AVAVT, Commented Jun 13, 2017 at 23:23

Chaim Friedman · Accepted Answer · 2017-06-13 23:50:20Z

2

Here is an example that shows when using the withRouter HOC, the routing props get injected to components even if they are not routed to.

Here is my App.js

    class App extends Component {
      render() {
        return (
          <div className="App">
            <BrowserRouter>
              <div>
                <Route path='/test' component={Sample} />
                <Sibling />
              </div>
            </BrowserRouter >
          </div>
        );
      }
    }

export default App;

Here is my Sample.js. This is like an example container that is rendering a child.

export default class Sample extends React.Component {
    render() {
        return (
            <div>
                <span>{this.props.location.pathname}</span>
                <br />
                <Nested />
            </div>
        )
    }
}

This component can display information about the current route even without the withRouter HOC since it is being routed to.

Here is my Nested.js.

class Nested extends React.Component {
    render() {
        return (
            <div>
                <span>I am nested {this.props.location.pathname}</span>
            </div>
        )
    }
}

export default withRouter(Nested);

My nested component needs the withRouter HOC in order to display the current route.

Finally here is my Sibling.js. (This is like your example where <SearchBox /> is a sibling.)

class Sibling extends React.Component {
    render() {
        return (
            <span>{this.props.location.pathname}</span>
        )
    }
}

export default withRouter(Sibling);

Here all that is needed is to make sure that the sibling is nested within the router as you can see in my App.js, and then using the withRouter HOC it can display the current pathname.

To clarify: If a component can access the current pathname then it can also change the routes programmatically by doing this. this.props.history.push(some path).

I hope this helps.

edited Jun 13, 2017 at 23:50

answered Jun 13, 2017 at 23:44

Chaim Friedman

6,2714 gold badges37 silver badges66 bronze badges

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

3 Comments

AVAVT Over a year ago

Thanks that clarified a lot for me!

Chaim Friedman Over a year ago

Great. Happy to help!

1252748 Over a year ago

Granted I am not a browserrouter expert, but I was unable to get this.context.transitionTo to work. Lots of this.context.router is undefined. Is this the new way to programmatically switch pages and transitionTo is deprecated. Into is a little light...

Collectives™ on Stack Overflow

react-router v4: triggering a redirect programmatically (without having to render a <Redirect / >)

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related