Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

History push doesn't render navigated page

See original GitHub issue

I got the following Router. I want to navigate to a new page. For this I tried <Redirect> first and this.props.history.push("/login") later.

In both cases the URL gets updated in the browser, but the page doesn’t rerender.

I’m using redux, redux-actions, redux-saga, react-router, react-router-dom, react, redux-form, react-dom

Example component

 export namespace Hom {
  export interface Props extends RouteComponentProps<void> {
    authenticated: boolean;
  }

  export interface State {}
}

//@connect(mapStateToProps, mapDispatchToProps)
class Hom extends React.Component<any, any> {
  // this function is bound
  goLogin = () => {
      return (
        <Redirect to="/login" />
      )
  }

  goLogin2 = () => {
    this.context.router.transition('/login');
  }

  componentWillMount() {
    if (!this.props.authenticated) {
      this.props.history.push('/login');
    }
  }

  render() {
    const { children, authenticated } = this.props;

    return (
      <div id="home">
        { authenticated && <div>
          <Header />
            <Row>
              <News /> 
              <LastSymbols />
            </Row>
          </div> }
      </div>
    );
  }
}

function mapStateToProps(state: RootState) {
  return {
    authenticated: state.auth.authenticated
  };
}

function mapDispatchToProps(dispatch) {
  return {};
}

export const Home = withRouter(connect<any, any, any>(mapStateToProps, mapDispatchToProps)(Hom))

ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter>
      <App>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/home" component={Home} />
          <Route path="/stock/:name" component={Stock} />
          <Route path="/login" component={Login} />
        </Switch>
      </App>
    </BrowserRouter>
  </Provider>,
  document.getElementById('root')
);