Skip to content

props cannot be passed - or can they? #139

@flipkickmedia

Description

@flipkickmedia

Hi svelte-router-spa peoples.

I'm trying to build a dynamic component system and am using svelte-router-spa as the core of the routing.

#9

I see this isn't currently supported.

In order for this system to work effectively I'm unable to use stores or context because I don't know until Ive loaded the component, what the requirements for that component is.

Aside from my use, this breaks the component flow inside svelte. It's kinda cumbersome to require the components to implement stores or context to retrieve data when there is a mechanism already in place.

I did make some progress passing props to the Layout using this as a basis - https://svelte.dev/repl/74593f36569a4c268d8a6ab277db34b5

let layoutProps = () => {
  component = Layout;
  props = {
    path: `${path}/${label}/${name}`,
    name: `layout`,
  };
};

let routes = [
    {
      name: "/people",
      component: HorizontalSplitView,
      layout: layoutProps(),
      currentRoute: "",
    },
  ];

When I try this with the component e.g.

let horizontalSplitViewProps = () => {
  component = HorizontalSplitView;
  props = {
    path: `${path}/${label}/${name}`,
    name: `hsplit`,
  };
};

let layoutProps = () => {
  component = Layout;
  props = {
    path: `${path}/${label}/${name}`,
    name: `layout`,
  };
};

let routes = [
    {
      name: "/people",
      component: horizontalSplitViewProps(),
      layout: layoutProps()
    },
  ];

I don't see any errors but the route doesn't load :(

Would you accept a PR for this so you can pass this form of component? It works for layout so it seems sensible for it to work for component

Keep working on this lib, its probably the most flexible svelte router and the only one which works with this type of dynamic config. Great work :)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions