Using router pages in the site menu?

I am trying desperately not to have to roll my own site menu. The built in site menu is extremely limited in functionality, and I’m trying to get around these limitations using various tricks.

From the documentation I’ve found, what I’m doing should be possible and supported, but it is not working.

Aside:
What I really want to do is to show different UI elements, and also sometimes apply different filters to a dataset on a dynamic page, depending on route paths or URL params. I want these pages to be findable in the normal site menu if possible.

I also don’t want to have to make separate pages for every one of these filter conditions. I need to be able to create ONE (All) Page, and redirect to that page with various filters. The (All) page is really complex and I do not want to be required to duplicate the page for each filter condition. This is hopefully possible, but I have not found a way to do this. It seems like if you want more than one category, you have to make separate pages, and each category actually puts a new column in your database for that link. This is NOT ideal to say the least.

Before getting into routers on dynamic pages, I thought I’d do a proof of concept on a non-dynamic page. Here is what I did.

Step 1. add router pages.

The documentation provided in the Router Pages settings says that you SHOULD be able to add links to your site menu for router pages, and they will route there. It says you cannot add normal menu navigation items, but it does say you can add links.

Is this documentation wrong?

Step 2. Write the router main function
This function just looks for the path portion of the URL. If there’s a path, route to it. Otherwise, route to the default main router page.

Using preview mode to verify this is a bit problematic, and since the router code runs on the back end, I just pushed the request into the routerData so I could log it from the console.

export function colors_Router(request) { 
 const data = request; // This is just so I can log the request data on the client console.log
 if (request.path[0]) {
 return wixRouter.ok(request.path[0], data);
 }
 return wixRouter.ok('colors-page', data);
}

Step 3. Go to the site menu and add links to the site menu that link to each router page

Add links to site menu:

Change the links to point to the various router pages:

It seems perfectly plausible that this should work. Dynamic pages are also represented in the built in site menu as links. The (All) page is the main route, and the (Title) page is the route plus title for the path. If this works with dynamic pages, shouldn’t it also work for router pages? The docs SEEM to indicate that it should.

Step 4. Add some buttons that open the router pages (just for testing).

The links in the buttons are hardcoded to https://…baseUrl…/colors/red etc.

The screenshot below shows both the site menu dropdown, and the buttons I created.

Step 5. Publish the site, and start clicking on menu items and buttons.

When using the SITE MENU to choose any of the router controlled pages, there is nothing in the path variable, and I am taken to the default router page instead of the specific page I requested. Here is what happens when I choose COLORS-RED from the site menu:

When I click one of the buttons, there is something in the path variable:

I also added another set of buttons that link to a PAGE (not a URL), and configured each button to open a router sub-page. These also do not work. So this is not something wrong that is specific to the menu. It seems like adding any page link does not set the path attribute.

Am I mis-reading the documentation? Do I have to create these site menu entries as vanilla web links? If so, this is pretty inconvenient. I haven’t found any way to specify the base URL as anything other than a hardcoded string that has to begin with http(s).

I wish it were possible to create a menu link like this, but I don’t think it is: {baseUrl}/path/to/my/page/whatever/

If you have to hardcode all of your links, lots of thing break.

  • Preview mode doesn’t work at all

  • If you change your domain name, you have to go find all of your links and manually change them.

  • If you map more than one domain name to your site, your links won’t work properly.

There are lots of reasons why NOT to have to hardcode the base URL. Wix really ought to have a way for us to specify a web address WITHIN THIS SITE. Either that, or Wix ought to make it possible to build a link with any page object. That includes dynamic pages, router pages, etc.

If this is not possible to do with routes, has anyone successfully done this without having to roll your own site menu?

It’s a bit frustrating how limited the built in site menus are. There are so many basic/essential features that are completely missing from the built in site menu. Things like “only show this menu item if the user is in a particular role.” Also missing is the ability to add URL parameters to a menu link. Without this ability, you’re left with using a router, which doesn’t seem to actually work. These seem like very basic things that you very typically need to do with a site menu. I looked at the menu API, and it’s bleak. There’s nothing in it other than standard Element attributes/functions (ie, things like show/hide/whatever is available on an Element).

Is there any possible chance that Wix could maybe expose something more powerful in the menu API (similar to the power of using repeater APIs directly)?

If none of this is possible, then I think my best option is just to replace my site menus with a custom coded repeater. Does anyone else have any better ideas?

Thanks
Tracey