Custom path is leading to the 404 page

🙋Get Help
1

Hi, I also tried the solution and the custom path is leading to the 404 page.

Could you take a look at where I need to fix it? Thank you!

src/index.js

const contactHandler = {
  pattern: "/contact",
  priority: 10,
  func: ({ state }) => {
    state.source.data["/contact"].isContact = true;
  },
};

export default {
  name: "my-custom-theme",
  roots: {
    theme: Root,
  },
  actions: {
    theme: {
      int: ({ libraries }) => {
        libraries.source.handlers.push(contactHandler);
      },
      toggleMobileMenu: ({ state }) => {
        state.theme.isMobileMenuOpen = !state.theme.isMobileMenuOpen;
      },
      closeMobileMenu: ({ state }) => {
        state.theme.isMobileMenuOpen = false;
      },
    },
  },
};

src/component/iindex.js

<Switch>
    <Loading when={data.isFetching} />
    <Home when={data.isHome} />
    <Contact when={data.isContact} />
    <NotFound />
 </Switch>

frontity.settings.js

const settings = {
 ...
  packages: [
    {
      name: "my-custom-theme",
      state: {
        theme: {
          menu: [
            ["Home", "/"],
            ["Contact", "/contact"],
          ],
        },
      },
    },
    ...
};
2

Hi @misakimichy

Can you please provide a repo or code-sandbox with your code? This is especially helpful to find solutions of technical issues with specific code

If you cannot share your repo, can you please recreate the scenario to reproduce the issue in a codeSandbox

3

Thank you for the link!

I just figured out how to render pages without menuHandler.
There is id property under state.source.get(state.router.link) which each page has different id, and I could use it to specify which component to render.

This is my routing page looks like:

const Root = ({ state }) => {
  const data = state.source.get(state.router.link);

  return (
    <>
      <Head>
        <meta name="description" content={state.frontity.description} />
        <html lang="en" />
      </Head>
      <GlobalStyles />
      <Nav />
      <Switch>
        <Loading when={data.isFetching} />

        <Home when={data.isHome} />
        <About when={data.id === 8} />
        <Contact when={data.id === 7} />
        <NotFound />
      </Switch>
      <Footer />
    </>
  );
};
export default connect(Root);