Handling optional Route path parameter (React)

Question

Basically I have a login route where I wanna be able to declare an optional path parameter.

In my React Router, I have the following path for login:

<Route exact path={routingService.loginUrl(":returnUrl?")} render={Auth} />

Where routingService is declared like this:

const routingService = {
  loginUrl: (returnUrl?: string) => `/login/?${encodeURIComponent(returnUrl || "")}`,
};

I tried this way but it didn't work. It redirects me to the NotFound page instead.

<Route path="*" component={NotFound} />

But when I manually change the path to

<Route exact path="/login/:returnUrl?" render={Auth} />

...it does work, but I want to organize the path by using the one (loginUrl) we have in routingService.

This might be really simple to fix, but I'm kinda struggling. Any thoughts?

Thank you!

(returnUrl?: string) => `/login/?${encodeURIComponent(returnUrl || "")}` appends the returnUrl where a queryString would be. Remove the ? from the string template. Can you be more specific about what isn't working? Is there an error? You probably don't need to URI encode your route path parameter. — Drew Reese
– Drew Reese, Commented Apr 13, 2022 at 18:37
@DrewReese it doesn't throw an error, it just redirects you to the NotFound page (path equals to *) instead. I already tried to remove the ? from the string template, but it didn't solve it — Lit2000hania
– Lit2000hania, Commented Apr 13, 2022 at 18:40
I don't understand the complexity/abstraction here, why can't routingService.loginUrl not just return the string "/login/:returnUrl?" for the route's path value? Do you have more than one login route that requires calling the second path segment a different name? Can you provide a more complete/comprehensive code example, or also a running codesandbox demo that reproduces the issue that we can inspect and debug live? — Drew Reese
– Drew Reese, Commented Apr 13, 2022 at 18:42
I also don't understant why I'm having this issue. And no, I don't have more than one login route besides this one — Lit2000hania
– Lit2000hania, Commented Apr 13, 2022 at 18:45
@DrewReese sure! As soon as I run a CodeSandbox demo, I will let you know. Thank you for now, Drew! — Lit2000hania
– Lit2000hania, Commented Apr 13, 2022 at 18:48

Shri Hari L · Accepted Answer · 2022-04-13 18:33:49Z

1

Is that because of extra ? in the function?

Corrected one:

const routingService = {
  loginUrl: (returnUrl?: string) => `/login/${returnUrl || ""}`,
};

Edit:

encodeURIComponent(":returnUrl?") gives us '%3AreturnUrl%3F', so it may not work. Maybe try without encodeURIComponent?

edited Apr 13, 2022 at 18:33

answered Apr 13, 2022 at 18:26

Shri Hari L

4,9732 gold badges8 silver badges22 bronze badges

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

3 Comments

Lit2000hania Over a year ago

I already tried to remove it before, but it didn't solve

Shri Hari L Over a year ago

Maybe without encodeURIComponent?

Lit2000hania Over a year ago

It doesn't work either, Shri

Drew Reese · Accepted Answer · 2022-04-13 19:11:53Z

I'm not sure why removing the extraneous "?" in the middle of the login path isn't working for you. The encodeURIComponent is certainly incorrect. You don't need to URLencode the paths you are trying to match by.

const routingService = {
  loginUrl: (returnUrl) => `/login/?${encodeURIComponent(returnUrl || "")}`,
};

console.log(routingService.loginUrl(":returnUrl?")); // "/login/?%3AreturnUrl%3F"

Remove the extra question mark that is placing the returnURL in the queryString portion of the URL, and remove the encodeURIComponent function call, just return the returnUrl value.

const routingService = {
  loginUrl: (returnUrl) => `/login/${returnUrl || ""}`,
};

console.log(routingService.loginUrl(":returnUrl?")); // "/login/:returnUrl"

const routingService = {
  loginUrl: (returnUrl?: string) => `/login/${returnUrl || ""}`
};

...

<Switch>
  <Route
    exact
    path={routingService.loginUrl(":returnUrl?")}
    render={(props) => <Auth />}
  />
  <Route path="*" component={NotFound} />
</Switch>

Working sandbox demo

Collectives™ on Stack Overflow

Handling optional Route path parameter (React)

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related