Force trailing slash for routes

[gilomen2]

Is it possible to force all routes to redirect to on match to the path plus a trailing slash?

[teodragovic]

You can do that using onChange handler:

import { Router, route } from 'preact-router';

const App = () => {

  const handleRoute = e => {
    if (e.url.slice(-1) !== '/') {
        route(`${e.url}/`, true);
    }
  };

  return (
    <Router onChange={handleRoute}>
      <Home path="/" />
      <Profile path="/profile" />
    </Router>
  );

};

I'm probably missing some edge cases here, but this would be the basic idea.

[developit]

That's pretty much the idea, yep. It's not perfect though, since route() will cause it to render again.

You can fix that by using the history API directly:

import { Router, route } from 'preact-router';

function ensureTrailingSlash({ url }) {
    if (url.slice(-1) !== '/') {
        history.replaceState(null, null, url + '/');
    }
};

function App() {
  return (
    <Router onChange={ensureTrailingSlash}>
      <Home path="/" />
      <Profile path="/profile" />
    </Router>
  );
};

[developit]

FWIW I'm open to an option to add this, I'm just not super convinced it can be done in a way that is better than server-side redirects / Service Worker / history interception.