React Router 1.0 - 替换 # 并摆脱 ?_k

Question

我在浏览器地址栏中得到 # 加上 ?_k=qy3joe 作为查询字符串参数，例如http://localhost/#/login/?_k=qy3joe。它在生产中看起来并不好。如何将 # 替换为 my-app 并删除 _k=qy3joe？

var React = require('react');
var ReactDOM = require('react-dom');
var ReactRouter = require('react-router');
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var IndexRoute = ReactRouter.IndexRoute;


var App = React.createClass({
  render: function(){
    return (
  <div>
  <h1>Welcome</h1>
    {this.props.children}
  </div>
);
}
});

var Login = React.createClass({
  render: function(){
    return (    
      <div className="large-3 medium-6 large-centered medium-centered columns"> 
        <h1>Login Page</h1>
      </div>

  ) }
});

ReactDOM.render((
  <Router>
    <Route path="/" component={App}>
      <Route path="login" component={Login}/>      
    </Route>
  </Router>
   ), document.getElementById('content'));

Answer 1

您需要使用以下内容设置路由器：

<Router history={createBrowserHistory()}>

这将为您提供看起来像 http://www.example.com/my/path 的 URL，并使用 HTML5 历史 API 来维护位置状态，而不是查询键。

https://github.com/rackt/react-router/blob/master/docs/guides/basics/Histories.md#createbrowserhistory 的 React Router 指南中介绍了各种历史记录的使用。