how to do similar routing like with react-router

Solution 1:

From what I understood, you have a Landing component which is a layout (so I suppose you render an Outlet?) and a FormLayout which is rendered inside the Landing layout when the user is at /, then for any other route you redirect to /, that's correct?

Supposing that's correct you would have to do it like this:

routes/__landing.tsx
routes/__landing/index.tsx
routes/$.tsx

That routes/__landing.tsx thing is called a Pathless Layout Route which is a layout route that doesn't add segments to the URL, so the final URL is going to be / and not /__landing. Inside this file you should render an <Outlet /> where the nested routes will be rendered.

The /routes/__landing/index.tsx is a nested route inside the routes/__landing.tsx, the component of this route it's going to be rendered where the parent placed the <Outlet />. All index files match the URLs /.

The routes/$.tsx is a splat route (or catch-all route) which will match every other URL, there you can put a redirect like this:

import type { LoaderFunction } from "remix";
import { redirect } from "remix";

export loader: LoaderFunction = async () => {
  return redirect("/");
}

But I recommend you to don't redirect all routes to / and instead render a not found page with the correct 404 status code. You can put the error pages inside the root.tsx file CatchBoundary or ErrorBoundary exports.