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?
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
Most helpful comment
I seem to be running into similar problem with nesting. Not sure if it's related.
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/exampleit works but obviously that means I'm not getting the benefits of the nesting feature.