Remix Dynamic route on root (/)

user_2278606 0
Viewed 701

I'm creating an app that should follow this rule:

  • "/" for homepage
  • "/login" for login
  • "/user" for user
  • "/X" for X represents all my movies genres. For example (/comedy, /fantasy). All genres are been stored in the database.

How to do it using remix? Is it possible?

remix.run
1 Answers

I was able to solved it using Dynamic Routes.

https://remix.run/docs/en/v1/api/conventions#dynamic-route-parameters

I have created a file called /routes/$page.

import { useParams , useLoaderData} from "remix";
import json from "../../data/movies.json";
import { redirect, Link } from "remix";

export async function loader({ params }) {
  const genre = [
    "comedy",
    "fantasy",
    "crime",
    "drama",
    "music",
  ];

  const { page = "" } = params;
  
  if (genre.includes(page)) {
    //Payload for the page.
    return 'hello';
  } else {
    return redirect("/404");
  }
}

const Page = () => {
  //Recieve payload.
  const data = useLoaderData();

  const params = useParams();
  console.log('client side', data)
  return <div>{data}</div>;
};

export default Page;

user_22786060
Related