PatternUtils.formatPattern replaces encoded space (%20) with +

[coopy]

This line causes a URL parameter to be encoded in a non-reversible way: https://github.com/rackt/react-router/blob/v1.0.0-rc3/modules/PatternUtils.js#L170

We have an IIS server that doesn't correctly resolve URLs because of this behavior.

The change was introduced here: d955d7a

I'd like to know the reason that this behavior was introduced, as it's somewhat unexpected. To quote @mjackson:

Apparently + is a special character in query strings, but not in the path portion of the URL.
#716 (comment)

I've not been able to find conclusive evidence in the URI spec, but considering that encoding and decoding should be symmetrical operations, this seems wrong. There is some discussion in this Stackoverflow thread.

Example:

var placeName = 'Laguna Beach';
var uri = formatPattern('/place/:placeName', { placeName: placeName });
decodeURI(uri);
// -> "/place/Laguna+Beach"
// Expected decoded URI would be "/place/Laguna Beach".

[taion]

Good catch. Do you want to put together a PR?

[coopy]

Sure, not a problem.

[taion]

It's interesting that we only call formatPattern from <Redirect>. You'd think a more consistent API to handle URL parameters in <Redirect> would be to just accept a function of params => new path.

[coopy]

In our application, we call formatPattern ourselves for reasons outlined in #1850.

[mjackson]

You're right, we should be using %20 in the pathname portion of the URL. We already have a test that appears to be testing the wrong thing.

I'd like to use + instead of %20 in the query string. From the URI spec:

Within the query string, the plus sign is reserved as shorthand notation for a space. Therefore, real plus signs must be encoded. This method was used to make query URIs easier to pass in systems which did not allow spaces.

But that logic belongs in the history package (i.e. useQueries), not here.

[Download]

I have a route like this:

<Route path="near/:city" component={StoresNear} />

In StoresNear, I print the :city parameter, like this:

<h2>Stores near {this.props.params.city}</h2>

I enter this URL into the address bar of the browser:

http://localhost:8080/near/My+City

I then get this header:

Stores near My+City

If I change the URL to use a percent-encoded space

http://localhost:8080/near/My%20City

it works:

Stores near My City

Question:
Is this expected behavior? I have been reading this bug report, as well as this old one and this more recent one, but I can't figure it out.

I didn't want to create a new issue so I hope you guys don't mind me reviving this one.

To me it feels like a bug that the plus symbol does not get decoded, but it might be a feature? I don't get it though because afaik, all servers will decode it to space...

[taion]

This is expected. + only gets decoded in query strings, not in URLs proper.

[Download]

@taion Ok, thanks for clearing that up. And Merry Christmas :)