Dynamic Routes

Often times, your app pages will need to be created dynamically.

Similar to page-based routes, Flareact allows you to define dynamic routes using React components defined in files.

To define a dynamic route, create a file with a name wrapped by square brackets [], e.g. /pages/[slug].js.

Dynamic Routes with getEdgeProps

If you need to fetch data for your dynamic page component, the dynamic parts will be passed as a params property to your getEdgeProps function.

Example: Your /pages/posts/[slug].js file might look like this:

export async function getEdgeProps({ params }) {
  const { slug } = params;
  const post = await getSomeRemotePost({ slug });

  return {
    props: {
      post
    }
  }
}

export default function Post({ post }) {
  ...
}

Nested Dynamic Routes

You can also nest dynamic routes, e.g.

/pages/posts/[category]/[slug].js

The params passed to your getEdgeProps function will contain each dynamic path property:

{
  params: {
    category,
    slug,
  }
}

You can also reference the query params with the useRouter hook in your component:

function Post() {
  const router = useRouter();

  const { category, slug } = router.query;
}

Resources