remix.run - 在根 (/) 上重新混合动态路由

Question

我正在创建一个应遵循此规则的应用程序：

• “/”代表主页
• "/login" 用于登录
• 用户的“/用户”
• X 的“/X”代表我所有的电影类型。例如（/喜剧、/幻想）。所有类型都存储在数据库中。

如何使用混音来做到这一点？可能吗？

Answer 1

我能够使用动态路由解决它。

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

我创建了一个名为 /root/$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;