Children is undefined even though route matches
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 795
- Forks
- 55
- Avg merge
- 5h 5m
- Merged PRs (30d)
- 2
Description
I'm experiencing an issue where I keep getting children = undefined in the parent's props when visiting a child route.
I'm using found with found-relay and I need to be able to visit routes matching /chat and /chat/12345. The following is part of my routing config:
...
{
path: '/chat',
Component: ChatView,
query: graphql`...`,
render: renderRoute,
children: [
{ },
{
path: '/:threadId',
Component: ThreadView,
render: renderRoute
query: graphql`...`,
},
],
},
...
I am able to visit /chat just fine, and the page renders as expected. However, when I try to visit /chat/12345 I see the graphql request run, and the renderRoute function is called for the child route, however children is null for the parent ChatView component.
Now, if I modify this to use a named child as such:
...
{
path: '/chat',
Component: ChatView,
query: graphql`...`,
render: renderRoute,
children: {
thread: [
{
path: '/:threadId',
Component: ThreadView,
render: renderRoute
query: graphql`...`,
},
},
],
},
...
Then I do see thread in the parent component's props, and child renders successfully.
What's going on here? Why doesn't the first example work?
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the route configuration for /chat and /chat/12345, then trace how renderRoute passes child routes into ChatView. Compare the unnamed child array with the named thread child and reproduce both cases. Done means explaining why the first configuration produces undefined or null children and documenting the supported configuration or behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- graphql, react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100