Question

我不知道如何使用反应路由器获取干净的网址。

目前我有这个：

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?"：

当历史记录通过push或replace转换到您的应用时，它可以存储未显示在新位置的网址中的“位置状态”，请稍微考虑一下比如以HTML格式发布数据。

哈希历史记录用于转换的DOM API只是window.location.hash = newHash，没有存储位置状态的位置。但是，我们希望所有历史记录都能够使用位置状态，因此我们通过为每个位置创建唯一键来对其进行填充，然后将该状态存储在会话存储中。当访问者点击“后退”和“前进”时，我们现在有了恢复位置状态的机制。

The history package docs解释如何选择退出 if 您想继续使用哈希历史记录：

如果您更喜欢使用其他查询参数，或者完全选择退出此行为，请使用queryKey配置选项。
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路由器为url提供了pad符号和get参数

1 个答案: