4Catalyzer / 4Catalyzer/found

Children is undefined even though route matches

Open
#646 4 comments 0 reactions 0 assignees View on GitHub

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

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.