Function Component

packages/react-router/tests/optional-path-params.test.tsx:595–637

()

      })

      function Component() {
        const navigate = useNavigate()
        const params = postsRoute.useParams()

        return (
          <div>
            <div data-testid="params">{JSON.stringify(params)}</div>
            <button
              data-testid="navigate-all"
              onClick={() =>
                navigate({
                  to: '/posts/{-$category}/{-$slug}',
                  params: false,
                })
              }
            >
              All Posts
            </button>
            <button
              data-testid="navigate-tech"
              onClick={() =>
                navigate({
                  to: '/posts/{-$category}/{-$slug}',
                  params: { category: 'tech', slug: undefined },
                })
              }
            >
              Tech Posts
            </button>
            <button
              data-testid="navigate-specific"
              onClick={() =>
                navigate({
                  to: '/posts/{-$category}/{-$slug}',
                  params: { category: 'tech', slug: 'hello-world' },
                })
              }
            >
              Specific Post
            </button>
          </div>
        )
      }
      // Start at a specific post
      window.history.replaceState({}, '', '/posts/tech/hello-world')