React Router v4 beta not rendering child routes?

React Router v4 beta not rendering child routes?
0.0 0

#1

Hey ladies & gents,

I currently have my app set up with React + React Router v4 beta + Redux.

I’m running into a problem where my child routes return null. In the past I know I would nest routes & call {this.props.children} in the render method to render those routes. It looks like that pattern has gone away with React Router v4 beta.

Any help would be greatly appreciated.

Here’s my index.js:

ReactDOM.render(
      <Provider store={store}>
        <Router>
          <div>
            <Route exact path="/" component={App} />
          </div>
        </Router>
      </Provider>, AppElement);

Here’s the return statement from App.js component:

return (
        <div className="app">
          <a name="top"></a>
          <Header user={this.props.user} />
          <TopNav user={this.props.user} />
          <BreadCrumbs />
          <div>
            <Route exact path="/" component={ShowsContainer} />
            <Route path="/show/:id" component={ShowContainer} />
            <Route path="/show/:id/artists" component={ArtistsContainer} />
          </div>
          <Footer />
        </div>

FYI - if I move the <Router> component into the App.js all routing works, but I lose access to the {match, history, location} props. If I keep the Router in the index.js I have access to those props but routing and linking to children breaks.


#2

Got it! Removed ‘exact’ from the index.js route & everything worked. You can’t render the children if the parent route will only exactly match ‘/’.


#3

Question - I am facing the exact same issue, but my “match” prop is fixed at path/url = “/” due to the main Route (“App” in your example). How did you go about this?


#4

I literally just signed up to this site to express my gratitude. Removing the “exact” attribute from my parent Route is what resolved the issue of my child Routes not rendering. Which makes a lot of sense when you consider what “exact” does. It only matches (and hence renders) when the pathname is exactly == to the path.

Thanks again!

Here’s my example for future reference for anyone else that comes across this problem:

Parent component w/ parent Routes

          <Switch>
            <Route exact path="/" render={() => (<Home data={data} />)} />
            <Route exact path="/site-plan" render={(props) => (<SitePlan {...props} data={data} />)} />
            <Route exact path="/floorplans" render={(props) => (<Floorplans {...props} data={data} />)} />
            <Route exact path="/location" render={(props) => (<Location {...props} data={data} />)} />
            <Route path="/gallery" render={(props) => (<Gallery {...props} data={data} />)} />
            <Route exact path="/features" render={(props) => (<Features {...props} data={data} />)} />
          </Switch>

Child routes of component rendered from parent routing:

          <Route exact path={`${this.props.match.url}/:gallery`}
            render={
              ({match}) => (
                <ThumbnailGallery
                  data={this.props.data}
                  activeGallery={this.state.activeGallery}
                  updateActiveGalleryImage={this._updateActiveGalleryImage}
                /> )
              }
          />
          <Route exact path={`${this.props.match.url}/:gallery/:image`}
            render={
              ({match}) => (
                <ActiveImageView
                  data={this.props.data}
                  activeGallery={this.state.activeGallery}
                  updateActiveGalleryImage={this._updateActiveGalleryImage}
                /> )
              }
          />

You can see for my Gallery component I’ve removed the exact attribute so that the child routes in Gallery can be matched and consequently render.