React Router and Arbitrary Query Params: Page Refreshes Unintentionally on Load?

问题

I've been using React Router with great success the past few weeks, but I just ran into an issue that I can't seem to find a resolution for. Whenever an arbitrary query parameter is appended to a url (in our case, for URL tracking purposes from email) the page that you land on will load, then automatically refresh without warning.

Given the most basic of route setups:

var routes = (
  <Route handler={ResultsController}>
     <DefaultRoute handler={Results} />
  </Route>
);

And a default handler:

Router.run(routes, function (Handler, state) {
  React.render(<Handler params={state.params} />, domElement);
});

If I navigate to http://whatever.com/results everything works as it should, but if I navigate to http://whatever.com/results?ref=track the page will refresh and redirect back to http://whatever.com/results#/. Please note that appending queryParams after the hash and slash results in correct behavior; problem is, many of these links are generated server-side and forcing hashes in such a way is not desired.

Do I need to setup a wildcard handler for queryParams? Any pointers to documentation would be helpful as well.

Edit:
While this doesn't address the overarching question / bug leading to unintentional refreshes, I've found that loading the route using the Router.HistoryLocation PushState option allows for queryParams pre-render:

Router.run(routes, Router.HistoryLocation, function (Handler, state) {
  React.render(<Handler params={state.params} query={state.query} />, domElement);
});

Thanks!

回答1:

The problem here is that you're using Router.HashLocation, the default location if you don't specify one.

Router.run(routes, Router.HistoryLocation, function(...

Will fix the problem, but you'll need a server that can handle it.

If you still want hash location, put your query after the #. As far as HashLocation is concerned, the query before the # is not part of the location that it understands.

来源：https://stackoverflow.com/questions/28952422/react-router-and-arbitrary-query-params-page-refreshes-unintentionally-on-load

标签

javascript

reactjs

query-parameters

react-router