Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

StaticRouter includes leading slash #5488

Closed
mxstbr opened this issue Sep 1, 2017 · 4 comments
Closed

StaticRouter includes leading slash #5488

mxstbr opened this issue Sep 1, 2017 · 4 comments

Comments

@mxstbr
Copy link
Contributor

mxstbr commented Sep 1, 2017

Version

react-router v4.2.0
react-router-dom v4.2.2

Steps to reproduce

Server-side render a react-router app with a <Link to="?some=query" />.

Expected Behavior

It should generate the same anchor tag HTML on the server as on the client.

Actual Behavior

screen shot 2017-09-01 at 4 07 55 pm

Any ideas why this is happening? I'm stumped. Tried including a different/empty basename on client and server but it's still there. Maybe related to #5127, but it's not a relative link is it?

@pshrmn
Copy link
Contributor

pshrmn commented Sep 1, 2017

The <StaticRouter> is a bit funky since it doesn't use a history instance, but it is actually the client side href that I am surprised about because history is supposed to return absolute paths.

The bug is in our <Link> implementation. <Link> assumes that if you pass it a string to prop that that string includes a pathname.

In the short term, if you switch from <Link to="?some=query" /> to <Link to={{ search: "?some=query" }} />, you should get consistent results, although the results might still be incorrect (since the pathname should be resolved based on the current location, not just default to root).

@mxstbr
Copy link
Contributor Author

mxstbr commented Sep 1, 2017

Would the fix here be to introduce a second check if (to[0] === '?') and then passing to to search or something to that effect?

mxstbr added a commit to withspectrum/spectrum that referenced this issue Sep 1, 2017
`react-router` has a bug where a `<Link />` with just a query parameter
in the `to` prop is treated like an absolute link, but only on the
server by the `StaticRouter`.

This works around the issue by transforming `<Link to="?thread" />` to
`<Link to={{ search: "?thread" }} />`.

Reference issue:
remix-run/react-router#5488
@pshrmn
Copy link
Contributor

pshrmn commented Sep 1, 2017

I think that we should be using the createLocation function exported by history to create an actual location object (parsePath would be another option, but createLocation is necesary for resolving relative paths with the current URL`).

I should have a PR up shortly. I'm taking this opportunity to finally have the <Link>s store their href in state so that they aren't recalculating that on every single re-render. Not a huge win, but it should be a bit more efficient.

@pshrmn
Copy link
Contributor

pshrmn commented Sep 1, 2017

Opened #5489

@timdorr timdorr closed this as completed Oct 3, 2017
@lock lock bot locked as resolved and limited conversation to collaborators Jan 18, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants