Question

hashHistory和context.router之间有什么区别？他们都路由网址，似乎工作相同。

Answer 1

hashHistory是history模块创建的history对象的实例。它的工作原理是修改URL的哈希值。

在React Router中，<Router>必须传递history个对象。您可以创建和配置自己的对象，但为方便起见，他们还会为您创建hashHistory和browserHistory个对象。这些对象可以导入并在整个项目中的任何位置使用，包括在组件中。使用它们的缺点是您无法自己配置它们。如果您需要使用任何历史记录配置选项，则需要创建自己的history对象。

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

render((
  <Router history={hashHistory}>...</Router>
), holder)

// or

import { Router } from 'react-router'
import { createHashHistory } from 'history'

const history = createHashHistory({ /* configuration options */ })
render((
  <Router history={history}>...</Router>
), holder)

在<Router>呈现的组件中，您可以访问context.router对象。这包括来自history对象的许多方法。对这些方法进行调用与在该文件中导入hashHistory并调用所需的任何导航功能相同。

const MyComponent = (props, context) => (
  <div onClick={() => { context.router.push('/other-page') }}>Click Me!</div>
)

const MyComponent = (props) => (
  <div onClick={() => { hashHistory.push('/other-page') }}>Click Me!</div>
)

这样做的缺点是您的组件便携性较差。而使用context.router将使用您传递给history的任何<Router>对象，如果您决定从hashHistory切换到browserHistory，则需要修改该组件

hashHistory vs context.router

1 个答案: