Javascript Reactjs路由器-无法删除url上丑陋的查询字符串_Javascript_Reactjs_React Router

Javascript Reactjs路由器-无法删除url上丑陋的查询字符串

javascript reactjs

Javascript Reactjs路由器-无法删除url上丑陋的查询字符串,javascript,reactjs,react-router,Javascript,Reactjs,React Router,我正在尝试删除查询字符串，并遵循以下步骤：而不是： http://myproject/index.html 你知道哪里出了问题吗编辑：整个测试代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello React!</title> <script src="bower_components/react

我正在尝试删除查询字符串，并遵循以下步骤：

而不是：

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>


你好，反应！
//避免使用路由器前缀。
// https://github.com/ReactTraining/react-router
var{路由器，
路线,，
IndexRoute，
IndexLink，
链接
browserHistory}=ReactRouter；
var Home=React.createClass({
render:function（）{
返回(
你好
设施设施（包括住宅、住宅等）
健康要素康伐利，健康要素康伐利，健康要素康伐利，健康要素康伐利，健康要素康伐利，健康要素康伐利，健康要素康伐利，健康要素康伐利，健康要素康伐利，健康要素康伐利，健康要素康伐利
妊娠期营养不良，子宫内膜异位症，子宫内膜异位症
马萨·梅塞纳斯·亨德雷特·劳里特·奥古斯
新的自然社会分子
不产的蒙特斯，发笑的纳赛特
Duis是一个turpis sed lacus dapibus element sed eu lectus
);
}
});
var Contact=React.createClass({
render:function（）{
返回(
有问题吗？
最简单的方法就是发布
我们的。

);
}
});
var Stuff=React.createClass({
render:function（）{
返回(
东西
Mauris sem velit，vehicula eget sodales vitae，
罗那库斯·埃吉特·萨皮恩：
无枕径
比本杜姆设施酒店
外阴前庭
埃吉特埃拉特酒店
Id端口滴定器
);
}
});
var App=React.createClass({
render:function（）{
返回(
简单水疗

家
东西
接触

{this.props.children}
)
}
});
ReactDOM.render(
,
document.getElementById（'容器'）
);

react路由器有一个用于此目的的

browserHistory

（删除散列）。删除这两行：

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

。。。并将

browserHistory

添加到从路由器导入的列表中：

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

替换

<Router history={history}>

与

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

目的地是一个DOM元素。
谢谢您的回答。我试过了。但我得到了同样的结果——一个完全空白的页面，上面写着丑陋的#/
。是destination
是一个DOM元素。您可以修改您的问题以发布更相关的代码吗？我已经在上面添加了我的全部代码。我还删除了目的地。你能看一下吗。谢谢。问题是您使用的是React路由器的UMD版本，没有模块绑定器-（参考：）。您应该使用NPM和webpack将项目捆绑在一起。这绝对是任何React开发的方式，我无法让ReactRouter单独在浏览器中工作。在完全放弃它之前，我强烈建议考虑使用npm+webpack+React。有一点学习曲线，但是给它一个下午的时间来建立它，你就不会回头了。无论如何，我希望你能找到你想要的！
var { Router,
  Route,
  IndexRoute,
  IndexLink,
  Link,
  browserHistory } = ReactRouter;

<Router history={history}>

<Router history={browserHistory}>