Route priorities

[pokorson]

Hi, in my project I along with route path like /welcome, /sign_in (specific string matched) I have also path /:id. I've found only way to match this route is to place it on top of routes
so it looks like:

const routes = [
  { path: '/:id', name: 'idRoute' },
  { path: '/welcome', name: 'welcome' },
  { path: '/sign_in', name: 'signIn' }
];

And it seems kind of strange for routes to be resolved bottom->top, wouldn't it make more sense to go top->bottom? So it checks all routes first and if none matches then it comes to /:id ?

[frenzzy]

The ordering works the same way as in express. So :id param matches everything and next route will not be called. Playground: https://jsfiddle.net/frenzzy/ko22k9cg/

[pokorson]

@frenzzy you're right routes are resolved top->bottom, and after further investigation my problem is different. It look like route matching is not stopped after first matched route. so with

const routes = [
  { path: '/welcome', name: 'welcome' },
  { path: '/sign_in', name: 'signIn' },
  { path: '/:id', name: 'idRoute' }
];

and path /welcome it matches both /welcome and /:id

[frenzzy]

Yes, because the action method of a route will have to return anything different from undefined to stop iterating and finish routing process.

const anyRoute = {
  path: '/'
  action() {
    if (condition) {
      return undefined // skip this route
    }
    return 'page'
  }
}

Playground: https://jsfiddle.net/frenzzy/ko22k9cg/1/

[pokorson]

I followed example from docs

const routes = [
  { path: '/one', action: ({ render }) => render(<h1>Page One</h1>) },
  { path: '/two', action: ({ render }) => render(<h1>Page Two</h1>) }
];

function render(component) {
  return Promise(resolve => {
    ReactDOM.render(component, document.body, resolve);
  });
}

so all of my actions are returning Promise but still this error appears.

[koistya]

const container = document.getElementById('root');

function render(component) {
  return Promise((resolve, reject) => {
    try {
      ReactDOM.render(component, container, () => resolve(true /* something not falsy */));
    } catch (err) { reject(err); }
  });
}

[frenzzy]

Router waits until your promise will be finished and if promise returns undefined Router skips current route.

[pokorson]

@koistya that corrects the issue, thanks! Would be good to include this in documentation.

[frenzzy]

By the way I think it is much better to start render strictly after the navigation process completely finished. This will help to avoid a lot of troubles like this and make the code easier to understand.

const routes = [
  { path: '/one', action() { return <div>One</div> } },
  { path: '/two', action() { return <div>Two</div> } },
  { path: '/*', action() { return <div>Not Found</div> } },
];

UniversalRouter
  .resolve(routes, { path: '/one' })
  .then(component =>
    ReactDOM.render(component, document.getElementById('root'))
  )

Playground:

• https://jsfiddle.net/frenzzy/ko22k9cg/3/
• https://jsfiddle.net/frenzzy/ko22k9cg/4/
• https://jsfiddle.net/frenzzy/ko22k9cg/5/

[frenzzy]

Closing this as resolved. Please reopen if needed.