Twitter-like route with username

[nosizejosh]

I am trying to achieve routes like http:mydomain.com/@username or http:mydomain.com/#username using flowrouter.

my route structure currently comprises public and private routes with some public routes like http:mydomain.com/about us, http:mydomain.com/contact us etc.

How do I implement http:mydomain.com/@username or http:mydomain.com/#username using flowrouter as public routes by catching routes with @ and #.

please share if you have implemented something similar or have a way of achieving my goal.

[copleykj]

You’ll likely just need to use a url parameter in your route definition. You’ll want to define all your other routes first though so that your other routes match first and don’t try to load a users profile instead.

// define no user profile routes
FlowRouter.route('/dashboard', {
  // options
});
FlowRouter.route('/admin', {
  // options
});
//define profile route last so  we don't try to load a profile for
//a user named admin or dashboard
FlowRouter.route('/:username', {
  // options
});

You will also want to think about limiting usernames from already defined routes and you’ll need to make certain that a user hasn’t already taken the name of a route if you ever need to add new routes. It’s a small chance but it’s there.

[nosizejosh]

Thank you for replying.
My challenge is that the admin and dashboard routes are not structurally different from the username routes.
That’s why I wanted to add the @ and # symbol so that those particular routes are differentiated and I can have custom core that runs only if such routes are entered.

For now I have, a structure below which achieves the differentiation and allows me run the custom code.

FlowRouter.route('/in/:username', {
  // options
});

But I still want to be able to do

FlowRouter.route('/@username', {
  // options
});

So that any route with @ symbol is treated as a user profile route and I run custom code for that.

[jamgold]

Have you tried the following? You need to include the slug :username

FlowRouter.route('/@:username', {
  // options
});

[nosizejosh]

Thank you. It worked. and it feels like a much better implementation that my previous attempts.
below is what I have

publicRoutes.route('/@:userName', { 
  action: function(params, queryParams) {    
  console.log("params", params)
  },
});

publicRoutes.route('/~:teamName', { 
  action: function(params, queryParams) {    
  console.log("params", params)
  },
});

Thank you!

Question: From this link, it says @ is not a safe character in urls, is that correct or i am just reading meanings into it?

[copleykj]

That’s correct, the @ needs to be url encoded.

[nosizejosh]

Please can you explain? So my current implementation is dangerous? how do I fix it?

[nosizejosh]

So for the @ route, the safe version becomes

publicRoutes.route('/%40:userName', { 
  action: function(params, queryParams) {    
  console.log("params", params)
  },
});

Is this a safer implementation?

The ~ route remains the same as article says that’s a safe character?

[nosizejosh]

publicRoutes.route('/%40:userName', { 
  action: function(params, queryParams) {    
  console.log("params", params)
  },
});

This actually doesn’t work!
so how to encode the @ for this purpose?