Help needed: nested views for some routes

[haikyuu]

Hi, thanks for this beautiful library.

I'd like to implement a basic layout in my app:

• Login screen: without layout.
• Other screens: they are inside a layout component

export default compose(
  mount({
    "/login": route({
      title: "Login",
      view: <Login />,
    }),
    "/": compose(
      withView((request) => (
        // This is the first view -- it renders the second within a
        // `<Layout>` component.
        <Layout request={request} mountpath={request.mountpath || "/"}>
          <View />
        </Layout>
      )),
      mount({
        "/home": route({
          title: "Home",
          getData: () => api.get("cases").json(),
          view: <Home />,
        }),
      })
    ),
  })
);

I get /home not found error. Can you help me fix this issue?

[jamesknelson]

Glad you like the library!

When you want to pass through all unmatched routes from a mount, then instead of using /, you'll want to use a * wildcard:

export default compose(
  mount({
    "/login": route({
      title: "Login",
      view: <Login />,
    }),
    "*": compose(
      withView((request) => (
        // This is the first view -- it renders the second within a
        // `<Layout>` component.
        <Layout request={request} mountpath={request.mountpath || "/"}>
          <View />
        </Layout>
      )),
      mount({
        "/home": route({
          title: "Home",
          getData: () => api.get("cases").json(),
          view: <Home />,
        }),
      })
    ),
  })
);

Hope this helps!

[haikyuu]

Works like a charm. Thanks