Skip to content

Router binds props from nested route to parent component #1191

Closed
@jods4

Description

@jods4

Version

4.0.12

Reproduction link

jsfiddle.net/k8z1vp4b/

Steps to reproduce

In the repro, there are two nested components: Bar -> Foo.
They both have props: true and both components have an id prop.

Because the :id route parameter is at the 2nd level, I would not expect it to "bleed" on the higher level.
This is opposite of regular dataflow and can cause unexpected issues if your top component has these props for other uses in another context.

This creates a brittle base problem. Adding a new prop in the child component can break its parent if the same props existed there.

What is expected?

props defined in nested routes shouldn't be set on parent component.

What is actually happening?

they are.


I am not really set on whether the opposite should happen or not (a parent route prop being set on a child component).
I suppose that could be understandable as it's the regular dataflow direction? Or not? Or maybe make it an explicit option?
Maybe all options are ok.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions