react router 给出一个 url 和一个 pad sign 和一个 get 参数

Question

我不确定如何使用 React 路由器清理 url。

目前我有这个：

http://localhost:8889/#/myRoute?_k=qq67x0

我想要这个：

http://localhost:8889/myRoute

我应该设置一个特定的配置步骤来解决这个问题吗？

这是我初始化路由器的方式：

import { browserHistory, Router, Route, Link, IndexRoute } from 'react-router

这是我的渲染函数：

render((
<Router history={browserHistory}>
  <Route path="/" component={App}>
    <IndexRoute component={MyComponent2} />
    <Route path="myComponent1" component={MyComponent1} />
    <Route path="myComponent2" component={MyComponent2} />
  </Route>
</Router>

), document.getElementById('react-container'))

编辑：

我已经安装了最新版本的路由器，现在可以正常使用了。

谢谢！

Answer 1

看看the documentation under "What is that ?_k=ckuvup junk in the URL?":

When a history transitions around your app with push or replace, it can store "location state" that doesn't show up in the URL on the new location, think of it a little bit like post data in an HTML form.

The DOM API that hash history uses to transition around is simply window.location.hash = newHash, with no place to store location state. But, we want all histories to be able to use location state, so we shim it by creating a unique key for each location and then store that state in session storage. When the visitor clicks "back" and "forward" we now have a mechanism to restore the location state.

The history package docs 说明如何选择退出，如果您想继续使用哈希历史：

If you prefer to use a different query parameter, or to opt-out of this behavior entirely, use the queryKey configuration option.
import createHistory from 'history/lib/createHashHistory'

// Use _key instead of _k.
let history = createHistory({
  queryKey: '_key'
})

// Opt-out of persistent state, not recommended.
let history = createHistory({
  queryKey: false
})

如果您想使用 HTML 5 pushState API，正如您在问题中提到的，那么您应该在路由器配置中使用 browserHistory 而不是hashHistory:

import { Router, browserHistory } from 'react-router'

<Router history={browserHistory}>
  ...

她 full "Histories" page in the React Router docs 了解更多信息。

react router 给出一个 url 和一个 pad sign 和一个 get 参数

react router gives a url with a pad sign and a get parameter

router

reactjs