Creating a router allows you to take complete control when handling certain incoming requests to your site. This article takes you through what code you have to write in order to make your router work. To learn more about what a router is and why you would want to create one, see . About Routers Add a Router To add a router: 1. Click on the icon that appears when hovering over the Page Code's Main Pages section in the and choose . Velo Sidebar Add a Router 2. Enter a for your router and click . All incoming requests with the specified URL prefix will be sent to your router for handling. URL prefix Add & Edit Code When adding a router: Your router's and functions are added in a file with sample code for a simple routing scenario. The file is found in the Code Files's Backend section of the Velo Sidebar. router() sitemap() routers.js routers.js A new section, Router Pages, is created in the Velo Sidebar for your routers. Router pages are grouped together under a title based on the prefix you chose earlier. One router page is created to start with. For example, if you named your router "myRouter", a page named is added under the title . myRouter-page MyRouter Pages (Router) Sample Scenario There are four parts to the sample code that's added to the file: routers.js The statement. import The sample data. The function. router() The function. sitemap() Import statement The functionality used to create a router is contained in the . To use this functionality, you need to import it. By default, the and functions are imported, as well as the object. Router API ok() notFound() WixRouterSitemapEntry {ok, notFound, WixRouterSitemapEntry} ; import from "wix-router" If you want to use more of the functionality from the Router API, you need to add it to the statement. import Sample Data In the sample scenario, the router uses some static data contained in an object named . peopleData peopleData = { : { : , : }, : { : , : }, : { : , : }, : { : , : }
}; const "Ash" title "Ash Stowe" image "https://static.wixstatic.com/media/b8f383e0fe2b478ea91362b707ef267b.jpg" "Aiden" title "Aiden Johnson" image "https://static.wixstatic.com/media/ca3c7ac5427e43928aa5f3f443ae2163.jpg" "Jess" title "Jess White" image "https://static.wixstatic.com/media/147fe6f37fe24e83977b4124e41b6d3d.jpg" "Morgan" title "Morgan James" image "https://static.wixstatic.com/media/59e1f2f4dbbc4f7c9d6e66e3e125d830.jpg" The object contains four keys, each representing a person. Each person contains two properties, a that is the person's full name and an that is a link to an image of the person. peopleData title image Although you can use static data with a router, typically you would use data from your site's database or an external source. We'll see where you would write code to retrieve that data a little later. Regardless of where you get the data from, since you'll be writing the code that handles it, the data can be structured in any way you like. Router Function Remember, all incoming requests with the URL prefix you specified when creating the router are sent to your router for handling. The function is where you handle those requests. router() The function is named with the following convention: router() <router prefix>_Router(request) So if you named your router , the code added to the file should look like: myRouter routers.js myRouter_Router(request) { // routing code ...} The function has a request parameter which receives a object that contains information about the incoming request. The object has information about the URL used to reach the router, where the request came from, and who the request came from. router() WixRouterRequest Typically, the function will decide which page to show (if any) and what data to pass to the page. A response is then sent using the , , , , functions. router() forbidden() notFound() ok() redirect() or sendStatus() Let's take a look at the sample function code: router() { name = request.path[ ]; data = peopleData[name]; (data) { seoData = { : data.title, : , : , : [
         { : data.title, : data.image, : }
      ]
    }; ok( , data, seoData); 
  } notFound();
} export ( ) function myRouter_Router request // Get item name from URL request const 0 // Get the item data by name const if //define SEO tags const title description `This is a description of page` ${data.title} noIndex false metaTags "og:title" "og:image" content "People Data" // Render item page return "myRouter-page" // Return 404 if item is not found return The function begins by parsing the request's path to pull out a name value. router() name = request.path[ ]; const 0 For example, a user might reach this function by browsing to . The received object's property will be an array with one element: . Now the value of name is " ". router() https://mysite.com/myRouter/Ash WixRouterRequest path ["Ash"] Ash Next, the function retrieves data based on the it received. router() name data = peopleData[name]; const Continuing our example above, we pull out Ash's information from the object. peopleData So now holds: data { : , : } title "Ash Stowe" image "https://static.wixstatic.com/media/b8f383e0fe2b478ea91362b707ef267b.jpg" If you want to retrieve data from an external source, this is where you place the call to retrieve that data. After attempting to retrieve the data that corresponds to the incoming request, we check to see if any data was found: (data) { } if // ... If nothing was found, the is skipped and we return a 404 error using the function. if notFound() notFound(); return Assuming we found the data we were looking for, we now prepare some header data for our page: seoData = { : data.title, : , : , : { : data.title, : data.image
  }
}; const title description `This is a description of page` ${data.title} noIndex false metaTags "og:title" "og:image" Here we create a object that defines what will be put in the HTML head of the page we respond to the request with. That object is stored in the seoData variable. HeadOptions The sample code creates a and based on the property of the retrieved object. It also sets to false, meaning search engines should index the page. Finally, some properties are added as well. title description title data noIndex metaTags You can create the object using any information you want. HeadOptions You can also add a keywords property to the object with a string containing the page's keywords. HeadOptions Finally, we return a object using the function: WixRouterResponse ok() ok( , data, seoData); return "myRouter-page" Here we route the user to the router page named " " and pass it the that was retrieved and the that was built for the page. myRouter-page data seoData Depending on the situation, you can return a number of different responses from the function. So far we've seen the and functions in use. You can also use the function to return a response, the function to return a or response, or the function to return a response with any status code you choose. router() notFound() ok() forbidden() 403 redirect() 301 302 sendStatus() Router Data To use the data that was returned with a using the function, use the window function. WixRouterResponse ok() wix- getRouterData() For example, we can take the data passed by the sample router code and use it to present a person's information on the page that was created. myRouter-page First, we need to add a text and image element to serve as placeholders for a person's title and image. Next, in the page's code we retrieve the router data and set the text and image elements to display the and from the data. title image wixWindow ;

$w.onReady( { data = wixWindow.getRouterData();
  $w( ).text = data.title;
  $w( ).src = data.image;
}); import from 'wix-window' ( ) function let "#text1" "#image1" If you preview the page, you'll see that the placeholders we put on the page are filled in with information from the data that was passed to the page. You can use the preview widget to see what the page looks like for any of the people in the object that was defined in the file. peopleData routers.js The preview widget gets populated with the values from the objects that are returned by the router's function. title WixRouterSitemapEntry sitemap() Sitemap Function Like the function, the function is named with the following convention: router() sitemap() <router prefix>_Sitemap(sitemapRequest) So if you named your router , the code added to the file should look like: myRouter routers.js myRouter_Sitemap(sitemapRequest) { // routing code ...} The function has a parameter which receives a object that contains information about the incoming request. The object has information about the URL used to reach the router, the pages in the router, and who the request came from. sitemap() sitemapRequest WixRouterSitemapEntry Typically, the function creates a object for each item in the data used by the router. So, in our example, we create an entry for each person in the object. You also might want to include entries for other pages, like an index page or a search page. sitemap() WixRouterSitemapEntry personData Let's take a look at the sample function code: sitemap() { siteMapEntries = .keys(peopleData).map( { data = peopleData[name]; entry = WixRouterSitemapEntry(name);
    entry.pageName = ; entry.url = ; entry.title = data.title; entry;
  } ); siteMapEntries;
} export ( ) function myRouter_SiteMap sitemapRequest // Convert the data to site map entries const Object ( ) => name const const new "myRouter-page" // The name of the page in the Wix Editor to render `/myRouter/ ` ${name} // Relative URL of the page // For better SEO - Help Google return // Return the site map entries return The function takes the keys of the peopleData object and uses the JavaScript function to create an array of objects, one object for each key. Each entry is given values for the , , and properties. Then the array is wrapped in a and returned. sitemap() map() WixRouterSitemapEntry pageName url title Promise A sitemap entry can also contain , , and properties to give search engines more information about each page. changeFrequecy lastModified priority In a case where you're using a router with external data, in the function you would retrieve that data and build sitemap entries for each item that was retrieved. sitemap() Previously published at https://support.wix.com/en/article/velo-creating-a-router

Google

Velo How-To: On Performance Optimization And Data

Creating and Debugging Website Routers

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

5 Hot Velo Practices to Test and Debug Your Website Code

10 Cool CI/CD Tools For Your Project

27 Stories To Learn About Ssl

20 Essential Backend Tools For Developers

3 Most Common Ways to Connect your Node and React Applications

369 Stories To Learn About Database

5 Hot Velo Practices to Test and Debug Your Website Code

10 Cool CI/CD Tools For Your Project

27 Stories To Learn About Ssl

20 Essential Backend Tools For Developers

3 Most Common Ways to Connect your Node and React Applications

369 Stories To Learn About Database

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps