Reactjs router - fails to remove ugly query string on url

Question

I am trying to remove the query string and have followed this answer:

var { Router,
  Route,
  IndexRoute,
  IndexLink,
  Link } = ReactRouter;

var createHashHistory = History.createHashHistory;
var history = createHashHistory({queryKey: false})

...

ReactDOM.render(
  <Router history={history}>
    <Route path="/" component={App}>
      <IndexRoute component={Home}/>
      <Route path="stuff" component={Stuff} />
      <Route path="contact" component={Contact} />
    </Route>
  </Router>,
  destination
);

So I don't see the query string anymore which is good, but I can't see the pages at all! What I get is a totally blank page!

Also, on the index page, I get this even uglier hash:

http://myproject/index.html#/

instead of:

http://myproject/index.html

Any ideas what gone wrong?

EDIT:

The entire test code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="bower_components/react/react.js"></script>
    <script src="bower_components/react/react-dom.js"></script>
    <script src="https://npmcdn.com/react-router/umd/ReactRouter.min.js"></script>
    <script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>
  </head>
  <body>
    <div id="container"></div>
    <script type="text/babel">
    // Avoiding the ReactRouter Prefix.
    // https://github.com/ReactTraining/react-router
    var { Router,
      Route,
      IndexRoute,
      IndexLink,
      Link,
      browserHistory } = ReactRouter;

    var Home = React.createClass({
      render: function() {
          return (
            <div>
              <h2>HELLO</h2>
              <p>Cras facilisis urna ornare ex volutpat, et
              convallis erat elementum. Ut aliquam, ipsum vitae
              gravida suscipit, metus dui bibendum est, eget rhoncus nibh
              metus nec massa. Maecenas hendrerit laoreet augue
              nec molestie. Cum sociis natoque penatibus et magnis
              dis parturient montes, nascetur ridiculus mus.</p>

              <p>Duis a turpis sed lacus dapibus elementum sed eu lectus.</p>
            </div>
          );
        }
    });

    var Contact = React.createClass({
      render: function() {
          return (
            <div>
              <h2>GOT QUESTIONS?</h2>
              <p>The easiest thing to do is post on
              our <a href="http://forum.kirupa.com">forums</a>.
              </p>
            </div>
          );
        }
    });

    var Stuff = React.createClass({
      render: function() {
          return (
            <div>
              <h2>STUFF</h2>
              <p>Mauris sem velit, vehicula eget sodales vitae,
              rhoncus eget sapien:</p>
              <ol>
                <li>Nulla pulvinar diam</li>
                <li>Facilisis bibendum</li>
                <li>Vestibulum vulputate</li>
                <li>Eget erat</li>
                <li>Id porttitor</li>
              </ol>
            </div>
          );
        }
    });

    var App = React.createClass({
      render: function() {
        return (
          <div>
            <h1>Simple SPA</h1>
            <ul className="header">
              <li><Link to="/" activeClassName="active">Home</Link></li>
              <li><Link to="/stuff" activeClassName="active">Stuff</Link></li>
              <li><Link to="/contact" activeClassName="active">Contact</Link></li>
            </ul>
            <div className="content">
              {this.props.children}
            </div>
          </div>
        )
      }
    });

    ReactDOM.render(
      <Router history={browserHistory}>
        <Route path="/" component={App}>
          <IndexRoute component={Home}/>
          <Route path="stuff" component={Stuff} />
          <Route path="contact" component={Contact} />
        </Route>
      </Router>,
      document.getElementById('container')
    );
  </script>
  </body>
</html>

score 1 · Answer 1 · answered Oct 08 '16 at 16:13

1

react-router has a browserHistory for this purpose (removing the hash). Remove these two lines:

var createHashHistory = History.createHashHistory;
var history = createHashHistory({queryKey: false})

... and add browserHistory to your list of imports from ReactRouter:

var { Router,
  Route,
  IndexRoute,
  IndexLink,
  Link,
  browserHistory } = ReactRouter;

and replace

<Router history={history}>

with

<Router history={browserHistory}>

As for why you are getting a blank page, there doesn't appear to be wrong with what you posted. But I would ensure that destination is a DOM element.

answered Oct 08 '16 at 16:13

Jeff Reznik

31
3

thanks for answer. I have tried that. But I get the same result - a total blank page with the ugly `#/`. yes `destination` is a DOM element. – Run Oct 08 '16 at 16:18
1

Could you modify your question to post more relevant code? – Jeff Reznik Oct 08 '16 at 16:20
I have added my entire code above. I also removed `destination`. can u take a look please. thanks. – Run Oct 08 '16 at 16:23
1

The issue is you are using a UMD version of React Router, and no module bundler - (reference: http://stackoverflow.com/questions/30427758/react-router-without-webpack-or-browserify). You should use NPM and webpack to bundle your project together. This is definitely the way to go for any React development, I couldn't get ReactRouter to work in the browser alone. – Jeff Reznik Oct 08 '16 at 17:52
thanks. i got it working now but the result from react router is not what i am looking for. it is really really bad. i won't be investing time in it any further now. so much hypes but a bad idea. i am checking out http://webcomponents.org/ instead. good luck! :-) – Run Oct 08 '16 at 17:57
1

Before ditching it completely, I highly recommend looking into using npm + webpack + React. Little bit of a learning curve, but give it an afternoon to get it set up and you won't look back. In any case, I hope you find what you are looking for! – Jeff Reznik Oct 08 '16 at 18:10

Reactjs router - fails to remove ugly query string on url

1 Answers1