Create a Router

Create a router to customize how your site handles certain incoming requests.

To create a router you first need to add the router in the site editor to set up the frontend pages, then code the router logic to handle requests and generate responses.

Step 1 | Add the router in the site editor

Whether you're working in the editor, Wix IDE, or your local IDE, you must first set up the router in the site editor. If you skip this step, Wix won't create the frontend router pages that are displayed to site visitors, and you won't have another way to add them. Once you create your router in the site editor, you can add the code in your preferred IDE.

At the end of this step, you'll have a router with a URL prefix configured in your site, along with the necessary files and pages created automatically.

To add a router to your site:

Depending on which development environment you're using, the following occurs once you've added the router:

Step 2 | Code the router

This step involves writing the actual router logic that handles incoming requests and generates appropriate responses. The code for the router works the same way no matter which IDE you're working in. All your router logic goes in the routers.js file.

At the end of this step, you'll have a fully functional router that can handle custom URL patterns, process requests, and return dynamic content with proper SEO metadata.

There are 4 parts to the sample code that's added to the routers.js file:

• The import statement: The default code imports some basic router functionality from the Router API, including the ok() and notFound() methods, as well as the WixRouterSitemapEntry object.

  Copy

  Keep this import statement when you customize your code, and use it to add any further functionality from the Router API. You may also need to import additional modules, such as the Data API.

• The sample data: The sample code includes an object called peopleData, which is the data the sample router displays on the router page. For your own code, delete, or replace this object. You can use the Data API to retrieve data items from a collection.

• The router() method: Every time you add a router to a site, Wix adds a router() method for it in routers.js. The first router() method added contains sample code below that does the following:

  The router gets the path from the request parameter (a WixRouterRequest object) and searches for it in the peopleData object. If found, it creates a HeadOptions object for SEO data, stores it in seoData, then passes both the data and SEO information to the ok() method to render the page. If not found, it returns a 404 page using the notFound() method.

  Copy

  You can build off the sample code to customize your router() method:

  1. Replace lines 3-6 with your own code to retrieve data from an external source or a collection on your site.

  2. Change the conditional statement to match your own router logic. For example, if you need to display either an index or an item page, build a logical statement that renders one or the other based on the contents of the path parameter.

  3. Change the HeadOptions object to generate your SEO data. You can use any information you want to create the object. For example, the sample code creates title and description properties based on data from peopleData. You can create your own properties from the data you retrieve and populate metaTags with this data as well.

     You can also add a keywords property to the HeadOptions object with a string containing the page's keywords.

  4. Your router method must return a WixRouterResponse object. This object is responsible for telling the router which page to display on the frontend when a visitor makes a request:

     • Use the ok() method to render a requested page if it exists. Pass 3 arguments to ok():

       • The name of the router page to render.
       • A data object containing the data to pass to the router page.
       • An object containing SEO data for the router page.

     • Use the notFound() method if the requested page isn't found. You can also use the forbidden(), redirect(), or sendStatus() methods.

• The sitemap() method: In addition to the router() method, Wix adds a sitemap() method to routers.js every time you add a router. The first sitemap() method added contains sample code below that does the following:

  The sitemap() method takes the keys of the peopleData sample object and uses the JavaScript map() method to create an array of WixRouterSitemapEntry objects, 1 object for each key. Each entry is given values for the pageName, url, and title properties. Then the array is wrapped in a Promise and returned.

  Copy

  Replace the sample code with code of your own that generates WixRouterSitemapEntry objects for each page. Then return these objects for SEO to use.

See also

• About routers
• About SEO and routing
• Tutorial: Create dynamic pages with a custom router
• About Router Caching