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/[email protected]/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>

Jeff Reznik · Accepted Answer · 2016-10-08 16:13:54Z

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 8, 2016 at 16:13

Jeff Reznik

313 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Run Over a year ago

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.

Jeff Reznik Over a year ago

Could you modify your question to post more relevant code?

Run Over a year ago

I have added my entire code above. I also removed destination. can u take a look please. thanks.

Jeff Reznik Over a year ago

The issue is you are using a UMD version of React Router, and no module bundler - (reference: stackoverflow.com/questions/30427758/…). 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 Over a year ago

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!

|

Collectives™ on Stack Overflow

Reactjs router - fails to remove ugly query string on url

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related