Notfound pattern not working when '/' is also in use.

[Cmdv]

This issue turned up here

I spoke to @TylorS and we thought giving the use of /$ would help, I wrote tests but was unable to implement the required use as I can only get one test or the other to pass never both.

it('should match a root base path when using /$', () => {
    const {path, value} = switchPath('/abc', {
      '/$': 123,
      '/home': 456,
      '/bar': 789,
      '*': 'Route not defined'
    });
    expect(path).to.be.equal('/abc');
    expect(value).to.be.equal('Route not defined');
  });

  it('should still match a notFound pattern when using /$', () => {
    const {path, value} = switchPath('/', {
      '/$': 123,
      '/home': 456,
      '/bar': 789,
      '*': 'Route not defined'
    });
    expect(path).to.be.equal('/');
    expect(value).to.be.equal(123);
  });

and here is how far I got :

traverseRoutes(routes, function matchPattern(pattern) {
    if (pattern === `/$`) {
      matchedPath = pattern // matchedPath = `/` 
// it needs to be one or the other dependent on visited route falls in * or `/`

      matchedValue = routes[pattern]
    } else if (sourcePath.search(pattern) === 0 && betterMatch(pattern, matchedPath)) {
      matchedPath = pattern
      matchedValue = routes[pattern]
    }

[Cmdv]

scrap that I have found an answer might not be the cleanest but will do away with using $ I'll make a PR for this.

[wyqydsyq]

Any progress on this? My current work-around is to use '/' as my not found page and map /$ to '/home' before providing the path to switch-path (so a request to the server on /$ will actually be /home to switch-path). This works but feels super hacky.

A fix for this issue seems to have been implemented in PR #17 but it was never merged?

[wyqydsyq]

If the implementation in PR #17 isn't suitable, I think perhaps a cleaner solution would be for switch-path to export a Symbol representing a bare root path (/$), this would allow users to explicitly specify a route for just / without all non-specified paths being unintentionally matched to it due to the optimistic matching. This way switch-path doesn't have to do any checking for $ characters or whether or not the provided routes have both / and * specified, it can treat all string paths like normal by matching optimistically and if the user wants to match only the root path (/) they can explicitly use the symbol for it.

So one could use it like:

import switchPath, { rootPath } from 'switch-path'

const { path, value } = switchPath({
    [rootPath]: HomePage,
    '/': NotFoundPage // or '*': NotFoundPage
})

[stevenmathews]

I like both solutions. Was confused why '*' wasn't working for me.

[wyqydsyq]

@staltz any chance you could please merge Tylor's PR for this & publish to NPM?

If not, would you be willing to accept a PR if I were to implement the Symbol solution I mentioned in this comment?

Thanks

[johanalkstal]

Just stumbled upon this as well and would love to see a fix!

[mapkuff]

I was trying to use cyclic-router with switch-path but I ended up on making own RouteMatcher using feather-route-matcher. Here what I've done (In case someone facing the same problem with default route as I did, btw you can change the routeMatcher lib and create your own adapter function)

  import * as R from 'ramda';
  import { identity, memoizeWith } from 'ramda';
   
  const createMatcher = memoizeWith(identity, routes => featherMatcher({ ...routes }));
  export const featherRouteMatcher = (path, routes) => {
    const routeMatcher = createMatcher(routes);
    const result = routeMatcher(path);
    return {
      path: result.url,
      value: result.page,
    };
  };