Router: [Question/Bug] PWA not rendering nested routes

Created on 2 Oct 2018  路  5Comments  路  Source: reach/router

When we open the app through the home screen, the nested children isn't rendered. Only if I click in a link which leads to the root path.

// router.js
import React from 'react'
import { Router as ReachRouter } from '@reach/router'

// other imports

const Router = () => (
  <ReachRouter>
    <App path="/">
      <Landing path="/" />
    </App>
    <NotFoundPage default />
  </ReachRouter>
)

export default Router
// app.js
import React, { Component } from 'react'
import PropTypes from 'prop-types'

import Footer from '_components/footer'
import Header from '_components/header'

import styles from './styles.css'

class App extends Component {
  static propTypes = {
    children: PropTypes.node.isRequired,
    location: PropTypes.object, // eslint-disable-line react/forbid-prop-types
  }

  static defaultProps = {
    location: {},
  }

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

    return (
      <section className={styles.container}>
        <Header />
        {children}
        <Footer />
      </section>
    )
  }
}

export default App

Ps.: Header and Footer components are rendering as expected.

Am I doing something wrong?

potential bug

Most helpful comment

I seem to be running into similar problem with nesting. Not sure if it's related.

const Archive = () => <div>This is the archive page</div>;
const ExampleProject = () => <div>Example Project page</div>;
<Router>
  <Home path="/" />
  <Archive path="archive">
    <ExampleProject path="example" />
  </Archive>
</Router>



md5-7a91d70052fbe42d75745589b1f49daf



<Link to="/archive">Archive</Link>
<Link to="/archive/exampleProject">Example Project</Link>

When I click either link, I see the text This is the archive page.

If I render the example project as a sibling and hard-code the path as archive/example it works but obviously that means I'm not getting the benefits of the nesting feature.

All 5 comments

I seem to be running into similar problem with nesting. Not sure if it's related.

const Archive = () => <div>This is the archive page</div>;
const ExampleProject = () => <div>Example Project page</div>;
<Router>
  <Home path="/" />
  <Archive path="archive">
    <ExampleProject path="example" />
  </Archive>
</Router>



md5-7a91d70052fbe42d75745589b1f49daf



<Link to="/archive">Archive</Link>
<Link to="/archive/exampleProject">Example Project</Link>

When I click either link, I see the text This is the archive page.

If I render the example project as a sibling and hard-code the path as archive/example it works but obviously that means I'm not getting the benefits of the nesting feature.

@kilmc it's the same problem. When I click in a link, the children is rendered.

It seems to be a problem with the first rendering.

Yep, the same problem. Is it actually a bug, or it's just us doing something wrong?

I have the exact same problem.

Same problem on latest version 1.3.1

Was this page helpful?
0 / 5 - 0 ratings

Related issues

sseppola picture sseppola  路  4Comments

michaelwiktorek picture michaelwiktorek  路  4Comments

artoodeeto picture artoodeeto  路  4Comments

ssured picture ssured  路  3Comments

ricardobrandao picture ricardobrandao  路  5Comments