React-router-dom v4 does not render the component

Question

I have a little bit complicated problem (I think so). I am using a React-router-dom v4. I wanted to implement private routes. I have a login page where I call API to authenticate and then when it is successful I redirect my application to another page. Till now everything works just fine. The problem starts when I try to redirect my application to another page under the private route.

here is my NavigationContainer render method (there is a Redux connected which supplies me the data about userData state:

render() {
  const { userData } = this.props

  return(
    <div style={{height: '100%', width: '100%'}}>
      <Switch>
        <Route exact path="/" component={LoginScreen} />
        <PrivateRoute path='/dashboard' authenticated={userData.isLoggedIn} component={PrivateRouteContainer} props={this.state} />
        <Route component={NotFoundPage} />
      </Switch>
    </div>
  )
}

my PrivateRoute implementation looks like:

const PrivateRoute = ({ component: Component, authenticated, ...rest }) => {
    return(<Route {...rest} render={(props) => authenticated === true 
        ? <Component {...props} />
        : <Redirect to='/' />
    } />)
  }

And finally my PrivateRouteContainer is implemented like this:

export default class PrivateRoute extends Component {

onMenuClick = (path) => {
    this.props.history.push('/dashboard' + path)
}

render() {
    return(
        <div>
            <NavigationBar onMenuClick={this.onMenuClick} />

                <Switch>
                    <Route exact path='/dashboard' component={MainPage} />
                    <Route path='/dashboard/loadFile' component={LoadFile} />
                </Switch>
            </div>
        )
    }
}

The only way to force the app to redirect to the path: dashboard/loadFile is to change something in the project and hot reload it. Otherwise, there is no possibility to force it to render the route.

Could someone suggest me something? I do not know where the problem is.

What happens when you click the `NavigationBar`? Does the URL change, but no new component is rendered? — Tholle, Aug 07 '18 at 21:25
@Tholle Exactly that is happening. The path is changing but the component is not rendered and there is no error in the console — Patryk Jabłoński, Aug 07 '18 at 21:34
To me it sounds like you have more than one `BrowserRouter` component in your app. It would be great if you created a [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve) in e.g. [CodeSandbox](https://codesandbox.io/s/new). It's hard to say what might be wrong otherwise. — Tholle, Aug 07 '18 at 21:38
I will take a look at the thing that you have suggested. If I would not be able to find more than one `Browser Router` then I will prepare the example. Thanks a lot for taking a look at the problem — Patryk Jabłoński, Aug 07 '18 at 21:47
You mentioned this is Redux connected. Could it be as simple as implementing what's suggested here: https://reacttraining.com/react-router/core/guides/redux-integration? I had a similar problem and the solution was to wrap the `connect()` statement with `withRouter` — ibex, Aug 08 '18 at 00:51
if you component where you routes are is a PureComponent, it can sometimes causes issues. if it is the case change it to Component and it will work just fine — André Gomes, Aug 08 '18 at 06:49
@ibex your answer helped me! `withRouter` did the work and now everything works perfectly. Thanks! — Patryk Jabłoński, Aug 08 '18 at 08:16

score 2 · Accepted Answer · answered Aug 14 '18 at 08:54

I'm posting this as an answer since the OP confirmed the validity.

React router documentation suggests using withRouter when using Redux connect()

import { withRouter } from 'react-router-dom'
export default withRouter(connect(mapStateToProps)(Something))

React-router-dom v4 does not render the component

1 Answers1