React Router With Regex

Question

If my url path starts with a /-IDNUMBER, I want the react-router to render the Home Component. For example if the URL is:

/-MX9EnU6aOtENtdQxLvF or /-MX9F3z22XrMjlgEAHUI it should render the Home Component. I assume the best way to do this is to use Regex (let me know if there is a better way). Here is what I tried:

<Route path="/^-" component={Home} />. This is not working, I tried other variations which also don't work. Please let me know how to fix this.

Hi! Thanks for finding that, I'm still having problems with getting the Regex to work. I don't know how long the ID Number can be, it can be as long as possible. Therefore I need a different answer. — Tarun Ravi
– Tarun Ravi, Commented Mar 31, 2021 at 23:12

filipemelo032 · Accepted Answer · 2021-04-01 14:15:35Z

1

I guess you could try something like:

const idRegex = '([0-9a-zA-Z]*)';

...

<Route path={`/-${idRegex}`} component={Home} />

I couldn't find the official documentation, but basically, if you open () in a path string, you can include a Regex expression in it. So, I basically wrote this simple Regex Expression that is going to match every number, letter and especial character.

So finally, when you add path={`/-${idRegex}`}, it's going to consider a a router as you need, /-USERID, and render the proper Component. The final Path String is going to be /-([0-9a-zA-Z]*).

I hope it's clear enough, and you can apply it furthermore to some other situations.

edited Apr 1, 2021 at 14:15

answered Mar 31, 2021 at 23:31

filipemelo032

1339 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tarun Ravi Over a year ago

Thank you for your answer! It works. Can you please explain how it works.

filipemelo032 Over a year ago

I just updated my answer. I hope it clarifies.

Collectives™ on Stack Overflow

React Router With Regex

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related