Inferno: Router: Cannot nest routed components

[lukeed]

Observed Behavior

I've replicated the example from inferno-router readme. The components in question are Users and User.

When nesting these routes, the <Users />'s children is always null. This is true when visiting /users, /user/foo, /user/bar.

Expected Current Behavior

<Users /> should be receiving the <User /> component as its child. Also, params is always empty, regardless of URL data.

Inferno Metadata

Using beta26 of inferno and inferno-router.

[LukeSheard]

What happens when you go to "/user/:username" ?

[lukeed]

Nothing, no children. Only the static <Users /> content is rendered.

[lukeed]

@LukeSheard @trueadm I was going to upload this as a Routing example to infernojs/examples anyway. Should I go ahead & do so now?

[LukeSheard]

So this is designed behaviour the same as RR3 where if a url starts with / then it is an absolute URL. This should be changed to user/:username in the example to account for this. We should also add an IndexRoute component to handle the case for /users.

[lukeed]

I've tried that.

With <Link to="/users/bob">Go to Bob</Link> in all cases:

// Users is hit every time. Logs no children
<Route path="users" component={ Users }>
  <Route path="users/:username" component={ User } />
</Route>

// same as above
<Route path="/users" component={ Users }>
  <Route path="/users/:username" component={ User } />
</Route>

// Only working implementation
<Route path="/users" component={ Users } />
<Route path="/users/:username" component={ User } />

[lukeed]

Of course, that last version is not _nested_.

It's only "working" in the sense that <User /> content is rendered to the screen. Nothing from <Users /> is visible/inherited.

[lukeed]

Pushed & accessible here.

[LukeSheard]

Interesting. Can you add a this as new test script /src/router/__tests__/simpleExample.ts that runs the example? Then we can take a look at it.

cc @nightwolfz since you wrote the matching code.

[nightwolfz]

@LukeSheard I'll take a look, I don't have access to my machine atm

In the meantime @lukeed can you try this syntax?

<Route path="users" component={ Users }>
  <Route path=":username" component={ User } />
</Route>

[lukeed]

Sure. Just tried, and it's the same result.

No children within <Users /> on any route. It's a greedy match and stops once fulfilled.

[nightwolfz]

Sorry it was supposed to be path="/:username with a slash.

Anyway I managed to make it work, fixing linting issues now from the rest of the code base (can't push otherwise). Sometimes I feel like I'm the only one with the linter enabled 🍴

[trueadm]

@nightwolfz Linters only kick in on files you change, they ignore files that haven't That could be why.

[nightwolfz]

@trueadm "Unfortunately" it's project wide with Webstorm :shit:

[lukeed]

@nightwolfz Can't believe I didn't try /:username. 😱

This was the final version that ended up working. I will close this issue & update my PR (of router tests) with the new expected syntax. Thanks!

<Router history={ history }>
    <Route component={ App }>
        <Route path="/" component={ Home } />
        <Route path="/users" component={ Users }>
            <Route path="/:username" component={ User } />
        </Route>
        <Route path="*" component={ NoMatch } />
    </Route>
</Router>