Next.js Discord

Discord Forum

Is it possible to pass props to a page component?

Answered
Japanese jack mackerel posted this in #help-forum
Open in Discord
Japanese jack mackerelOP
Hello everyone! I am creating a function that intercepts a catch-all route in the app directory. I currently have it setup as /[[...slug]]/page.tsx. In page.tsx, i have the following code:

import { TestPage } from "components/test-page";
export default TestPage;

it is working now, but i am trying to be able to pass in an options object to configure the component. when I try to add props im getting errors all over. Does anyone know if its possible to pass in extra props to a page route? Thanks!
Answered by Japanese jack mackerel
doing it that way doesnt pass the props from the page (params and searchParams). I figured it out in the end. I took a fresh look this morning and got it working this way:

type Props = {
  options: {
    option1: true
  };
  params?: { string[] };

  searchParams?: { any };
};

const NewComponent = ({ options, params, searchParams }: Props) => {

 return <div>Hello World</div>
};

export default NewComponent;
View full answer

2 Replies

@Ray could you do this? ts import { TestPage } from "components/test-page"; export default function Page() { const moreProps = {} return <TestPage {...moreProps} /> };
Japanese jack mackerelOP
doing it that way doesnt pass the props from the page (params and searchParams). I figured it out in the end. I took a fresh look this morning and got it working this way:

type Props = {
  options: {
    option1: true
  };
  params?: { string[] };

  searchParams?: { any };
};

const NewComponent = ({ options, params, searchParams }: Props) => {

 return <div>Hello World</div>
};

export default NewComponent;
Answer