Trailing slash + `exactly`

See original GitHub issue

Hi there,

Apologies up front if this is the wrong place for this - wasn’t quite sure what category this issue falls into so I figured I’d start here. Also, sorry if I’ve missed something obvious in my search for a solution or to see if this had already been answered elsewhere.

Basically, I’m starting a new project with version 4.0.0-alpha.5 and have just a few routes right now:

<Match exactly pattern="/" component={Dashboard} />
<Match exactly pattern="/users/:id" component={User} />
<Match exactly pattern="/login" component={LoginForm} />
<Miss component={NotFoundError} />

I’m using exactly pretty liberally because I want to be able to navigate to /users/lol and get the user lol’s page, but I don’t want to navigate to /users/lol/cats and get the user lol’s page (rather, a 404), which is the behavior without exactly. So, this works well for my current use case.

However, I do want to be able to go to /users/lol/ with the trailing slash and have it show me the user lol’s page. As it stands now, the only way I can get it to work is to add another <Match>:

<Match exactly pattern="/" component={Dashboard} />
<Match exactly pattern="/users/:id" component={User} />
<Match exactly pattern="/users/:id/" component={User} />
<Match exactly pattern="/login" component={LoginForm} />
<Miss component={NotFoundError} />

It could be that I’m just missing an obvious way to make this work, whether that be with some regex pattern or otherwise, but this is the only way I could get the behavior I’m looking for.

I have also downloaded the path-to-regexp package separately and been able to reproduce the behavior I want with this code:

const pathToRegexp = require('path-to-regexp');
const keys = []
const re = pathToRegexp('/users/:id', keys, { end: true, strict: false });

From what I can tell, the difference between this code and React Router v4 is the strict option being set to false.

Thanks in advance for any help or feedback!

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:16
  • Comments:13 (6 by maintainers)

github_iconTop GitHub Comments

4reactions
dictionscommented, Dec 30, 2016

For those looking for a work around for now, I’m using this:

const RemoveTrailingSlash = ({location}) => {
  const {pathname} = location;
	
  if (pathname.substr(-1) === '/') {
    return <Redirect to={pathname.substr(0, pathname.length - 1)} />;
  } else {
    return null;
  }
};

<Router>
  <Match pattern="/" render={RemoveTrailingSlash} />
  ...
</Router>
2reactions
porfirioribeirocommented, Jan 12, 2017

I had this problem also, it’s a pity, but found a way to work arround it

  • Match _url_/season and _url_/season/
<Match pattern={`${pattern}/season(/)?`} exactly component={SeasonList} />
  • Match _url_/season/add, _url_/season/add/ and _url_/season/add/32
<Match pattern={`${pattern}/season/add(/)?:seasonId(\\d+)*`} exactly component={SeasonAdd} />
  • Match _url_/season/32
<Match pattern={`${pattern}/season/:seasonId(\\d+)`} exactly component={SeasonContainer} />
Read more comments on GitHub >

github_iconTop Results From Across the Web

What is a trailing slash? - Ryte Wiki
A trailing slash is the forward slash placed at the end of a URL. The trailing slash is generally used to mark a...
Read more >
When should I use a trailing slash in my URL? - Stack Overflow
The trailing slash does not matter for your root domain or subdomain. Google sees the two as equivalent. But ...
Read more >
Trailing slashes and SEO | SiteGuru
Trailing slashes, used incorrectly, can damage your SEO activities. This article explains how to make the right set-up and avoid SEO damage.
Read more >
What are trailing slashes? - SISTRIX
A trailing slash is the last slash in a URL. Depending on its position, it can either have an impact on the URL...
Read more >
Trailing Slashes on URLs: Contentious or Settled? | CSS-Tricks
I've always preferred this thinking: you use a trailing slash if that page has child pages (as in, it is something of a...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found