Path Routing (.htaccess)
Use path-based routing for clean URLs like /directory/business-name instead of hash fragments.
Haven configuration
Change routing type from hash to path:
javascript
.directory.init({
routing: {
path: '/directory2/',
type: 'path',
titleSep: ' | ',
doPathChange: true,
},
selector: '#haven-app',
options: {
// same options as a full directory
},
})All other directory options remain the same as a Full Directory embed.
Apache rewrite rules
Place this .htaccess file in the same directory as your index.html:
apache
# Path-based Haven directory routing
# Rewrites clean URLs (e.g. /directory2/category/product) to index.html
# so the client-side router can handle navigation.
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /directory2/
# Leave real files and directories untouched
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
# Route all other requests to the app shell
RewriteRule ^ index.html [L]
</IfModule>
DirectoryIndex index.htmlReplace /directory2/ with your routing path.
Nginx equivalent
nginx
location /directory2/ {
try_files $uri $uri/ /directory2/index.html;
}URL examples
With path: '/directory2/' and type: 'path':
| URL | View |
|---|---|
/directory2/ | Root directory list |
/directory2/food-drink | Category view |
/directory2/food-drink/cafe-name | Product detail |
Hash vs path comparison
| Hash routing | Path routing | |
|---|---|---|
| URL style | /directory/#/category/product | /directory/category/product |
| Server config | None required | Rewrite rules required |
| SEO | Less friendly | More friendly |
| Setup complexity | Low | Medium |
Troubleshooting
| Issue | Solution |
|---|---|
| 404 on direct URL access | Verify rewrite rules and RewriteBase match your path |
| Assets not loading | Ensure rewrite conditions exclude real files (!-f, !-d) |
| Wrong page on refresh | Confirm all routes point to index.html |
See Routing guide and Common Issues.