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
this.context.transitionTo(...) is how you do programmatic redirect if I'm reading what your question correctly. — 1252748
@promisified Actually no, the SearchBox's inside the sidebar, which is a siblings of the <Route>s — AVAVT
@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

Chaim Friedman Chaim Friedman · Accepted Answer · 2017-06-13T23:44:00

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.

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

1 Answers