Given that this is a working url with the correct routing using react-router-v4 and browserhistory:

https://localhost:8020/User/Category

My code implemnetation does it right, but what if the user makes the following error whilst posing the url manually:

http://localhost:8020/User//Category (double forward slash)

Is there a way we can treat double slashes as one without having to manually catch them as a valid route? I've seen multiple websites with this behaviour.

I tried creating my own custom middleware to intercept the location changes and fix it but i'm having a lot of dificulties typing it, so I want to know if there's an (easy) alternative.

Thanks in advance.

Given that this is a working url with the correct routing using react-router-v4 and browserhistory:

https://localhost:8020/User/Category

My code implemnetation does it right, but what if the user makes the following error whilst posing the url manually:

http://localhost:8020/User//Category (double forward slash)

Is there a way we can treat double slashes as one without having to manually catch them as a valid route? I've seen multiple websites with this behaviour.

I tried creating my own custom middleware to intercept the location changes and fix it but i'm having a lot of dificulties typing it, so I want to know if there's an (easy) alternative.

Thanks in advance.

• javascript
• reactjs
• react-router

• Can you elaborate on how you are defining routes? – Govind Rai Commented Mar 12, 2018 at 16:55
• Any luck with this? pl share if you found the solution – Rashmin Javiya Commented Jan 17, 2020 at 18:45

3 Answers 3

So you're saying what if the user ends up going to /user//category? In this case, the browser treats multiple consecutive forward slashes and treats them as one. Try google.///mail. Should still take you to google./mail. Therefore you shouldn't need to change anything on your end.

Add this at the beginning of your Switch:

<Redirect from={`User//:name`} to={`User/:name`} />

or better, if you use

  const { path, url } = useRouteMatch();

then use:

<Redirect from={`${path}//:name`} to={`${path}/:name`} />

This sounds similar to an issue I had this morning. I would get a double slash if I went from localhost:3000/home/ (localhost:3000:3000/home//navigation), but a single from localhost:3000/home (localhost:3000/home/navigation). I solved it by wrapping my links in a ternary operator and checking if the last char in the current path was a '/'.

(this.props.match.path.slice(-1) === '/') ? `${this.props.match.path}navigation` : `${this.props.match.path}/navigation`

I don't know if this could help with your issue?