React-router: ? breaks routing

[mmacdonald1]

Version

"react-router-dom": "^5.0.0"

Test Case

<div className="App">
        <BrowserRouter>
          <Route path="/pls/apex/f?p=123:910:8789452247533:::::/foo" component={foo} />
        </BrowserRouter>
</div>

Steps to reproduce

add a ? in a route path

Expected Behavior

See component foo when I go to the entered path

Actual Behavior

empty screen
* When you take out the question mark it works

[StringEpsilon]

That's not a valid path.

According to the spec, the path portion of the URL ends on a question mark, as it marks the start of the "query" part.

See RFC 3986, section 3:

https://tools.ietf.org/html/rfc3986#section-3

[MeiKatz]

@StringEpsilon might be, that it's not a valid path, but we should handle it as well.

[mmacdonald1]

We don't have a choice in the ?. Oracle APEX is not flexible enough to take out the ?.

[pshrmn]

React Router only does matching on the pathname portion of a location. With the above path, that would be /pls/apex/f. However, I assume that you actually want to match the /foo part of the string and everything before that is the same for every location.

Assuming that I am correct about the APEX URL being constant, the best approach would be to use the HashRouter. You'll end up with URLs looking like /pls/apex/f?p=123:910:8789452247533:::::#/foo, but you would only have to match the hash segment of the URL.

<HashRouter>
  <Route path="/foo" component={foo} />
</HashRouter>

[timdorr]

I found the docs on this and it's straight up abusing the spec on this. Oracle is bad and should feel bad.

Anyways, a HashRouter is going to be your best bet here.

[allankikkas]

you can always create your own subrouter. just route "/pls/apex/f" part to a component, take it's search value from props, split it up using whichever library you find suitable and create sub-routes from there. I have done this several times for double and triple hash routing and query string together (route + multilevel tabs).