RoconでDeep Routeへ遷移するときにハマった箇所

roconを触っているときに、ハマって結構悩みました。

import React from "react";
import Rocon from "rocon/react";

const deepRoutes = Rocon.Path().any("id", {
  action: ({ id }) => <p>ID is {id}</p>,
});

const topLevelRoutes = Rocon.Path().route("articles", (r) =>
  r.attach(deepRoutes)
);

const SampleComponent = () => {
  const navigate = Rocon.useNavigate();
  return (
    <button onClick={() => navigate(/* ここをどう書くか */, { id: "123" })}>
      Move to /articles/123
    </button>
  );
};

const Routes = () => {
  return Rocon.useRoutes(topLevelRoutes);
};

const App = () => {
  return (
    <Rocon.RoconRoot>
      <SampleComponent />
      <Routes />
    </Rocon.RoconRoot>
  );
};

このとき

// NG
navigate(topLevelRoutes._.articles, { id: "123" })

とすると、/articlesに遷移してしまいます。

ただし、こう記述しても、型エラーになりません。

正しくは、

// OK
navigate(deepRoutes.anyRoute, { id: "123" })

です。

これで、/articles/123に遷移するようになります。

全体のコードはこうなります。

import React from "react";
import Rocon from "rocon/react";

const deepRoutes = Rocon.Path().any("id", {
  action: ({ id }) => <p>ID is {id}</p>,
});

const topLevelRoutes = Rocon.Path().route("articles", (r) =>
  r.attach(deepRoutes)
);

const SampleComponent = () => {
  const navigate = Rocon.useNavigate();
  return (
    <button onClick={() => navigate(deepRoutes.anyRoute, { id: "123" })}>
      Move to /articles/123
    </button>
  );
};

const Routes = () => {
  return Rocon.useRoutes(topLevelRoutes);
};

const App = () => {
  return (
    <Rocon.RoconRoot>
      <SampleComponent />
      <Routes />
    </Rocon.RoconRoot>
  );
};