DynamicRouteにRocon.Stateを合わせたルートの使い方

[lainNao]

「users/:user_id」（location.stateに真偽値sampleStateを持つ）ルートの定義の仕方と、そこへの<Link>コンポーネントを使った遷移の仕方がわからず6時間悩んでいます。

もしよければ教えていただきたいですm(__)m

[uhyo]

返信が遅くなり申し訳ありません。その場合、 /users/:user_id を表すrouteにさらにStateをattachしてルートを定義します。具体例は以下の通りです。

ただ、stateが絡んだ場合に Linkがこれまでうまく動いていないバグがありました。 😇 最新の 1.2.8 で修正して動くようになっています。

https://codesandbox.io/s/sleepy-liskov-hm7rqx?file=/src/App.tsx:

const isBoolean = (value: unknown): value is boolean =>
  typeof value === "boolean";

const topRoutes = Rocon.Path()
  .exact({
    action: () => <p>Top Route</p>
  })
  .route("users");

const userWithState = topRoutes._.users
  .attach(Rocon.Path())
  .any("user_id")
  .anyRoute.attach(Rocon.State("sampleState", isBoolean, { optional: true }))
  .action(({ sampleState }) => <p>SampleState is {String(sampleState)}</p>);

export default function App() {
  const renderedRoute = useRoutes(topRoutes);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <ul>
        <li>
          <Link route={topRoutes.exactRoute}>Top</Link>
        </li>
        <li>
          {" "}
          <Link
            route={userWithState.route}
            match={{ sampleState: false, user_id: "uhyo" }}
          >
            SampleState=false
          </Link>
        </li>
        <li>
          <Link
            route={userWithState.route}
            match={{ sampleState: true, user_id: "uhyo" }}
          >
            SampleState=true
          </Link>
        </li>
      </ul>
      <hr />
      {renderedRoute}
    </div>
  );
}

[lainNao]

できましたありがとうございます！！！🥺！！！