Question

我正在尝试删除查询字符串并遵循此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
);

所以我再也看不到查询字符串哪个好了，但我根本看不到这些页面！我得到的是一个完全空白页！

此外，在索引页面上，我甚至可以丑陋哈希：

http://myproject/index.html#/

而不是：

http://myproject/index.html

任何想法出了什么问题？

修改

整个测试代码：

<!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>

Answer 1

react-router为此目的有一个browserHistory（删除哈希）。删除这两行：

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

...并将browserHistory添加到ReactRouter的导入列表中：

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

并替换

<Router history={history}>

与

<Router history={browserHistory}>

至于为什么你会得到一个空白页面，你发布的内容似乎没有错。但我会确保destination是一个DOM元素。

Reactjs路由器 - 无法删除网址

1 个答案: