connected-react-router 常见问题深度解析-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00888/article/details/148523415

connected-react-router 常见问题深度解析

connected-react-router supasate/connected-react-router: Connected React Router是Redux与React Router v4/v5结合使用的中间件和高阶组件，通过将路由状态合并到Redux store中，实现了全局应用状态管理和路由状态的一体化管理。项目地址: https://gitcode.com/gh_mirrors/co/connected-react-router

connected-react-router 是一个将 React Router 与 Redux 状态管理深度集成的库，它允许开发者通过 Redux 的 action 来控制路由导航，并将路由状态存储在 Redux store 中。本文将针对该库使用过程中的常见问题进行详细解答。

通过 Redux action 进行导航

connected-react-router 提供了多种方式来实现通过 Redux action 进行路由跳转：

1. 直接使用 store.dispatch

import { push } from 'connected-react-router'

store.dispatch(push('/path/to/somewhere'))

2. 结合 react-redux 使用

import { push } from 'connected-react-router'
import { connect } from 'react-redux'

function MyComponent({ push }) {
  return (
    <button onClick={() => push('/home')}>
      前往首页
    </button>
  )
}

export default connect(null, { push })(MyComponent)

3. 在 Redux Thunk 中使用

import { push } from 'connected-react-router'

export const login = (credentials) => (dispatch) => {
  // 执行登录逻辑
  dispatch(push('/dashboard'))
}

4. 在 Redux Saga 中使用

import { push } from 'connected-react-router'
import { put } from 'redux-saga/effects'

export function* loginSaga() {
  // 执行登录逻辑
  yield put(push('/profile'))
}

获取当前浏览器地址信息

通过连接到 Redux store，我们可以轻松获取当前的路由信息：

import { connect } from 'react-redux'

function LocationDisplay({ pathname, search, hash }) {
  return (
    <div>
      当前路径: {pathname}
      查询参数: {search}
      Hash值: {hash}
    </div>
  )
}

const mapStateToProps = (state) => ({
  pathname: state.router.location.pathname,
  search: state.router.location.search,
  hash: state.router.location.hash
})

export default connect(mapStateToProps)(LocationDisplay)

配置路由属性

connected-react-router 支持通过 history 对象配置各种路由属性：

import { createBrowserHistory } from 'history'

// 配置基础路径
const history = createBrowserHistory({
  basename: '/app',
  forceRefresh: false
})

// 或者使用 HashHistory
const hashHistory = createHashHistory({
  hashType: 'slash'
})

热重载功能组件

实现热重载需要以下步骤：

将主应用组件分离到单独文件
使用 react-hot-loader 的 AppContainer 包裹应用
设置热更新监听

// App.js
const App = ({ history }) => (
  <ConnectedRouter history={history}>
    {/* 路由配置 */}
  </ConnectedRouter>
)

// index.js
const render = () => {
  ReactDOM.render(
    <AppContainer>
      <Provider store={store}>
        <App history={history} />
      </Provider>
    </AppContainer>,
    document.getElementById('root')
  )
}

if (module.hot) {
  module.hot.accept('./App', render)
}

支持 Immutable.js

要与 Immutable.js 集成，需要使用专门为 Immutable 设计的版本：

import { connectRouter } from 'connected-react-router/immutable'
import { combineReducers } from 'redux-immutable'

const rootReducer = (history) => combineReducers({
  router: connectRouter(history),
  // 其他reducer
})

从 v4 迁移到 v5/v6

迁移主要涉及三个变化：

将 root reducer 改为接收 history 的函数
在 store 创建时使用新的 root reducer 函数
更新热重载逻辑

// 迁移前
export default combineReducers({ /* reducers */ })

// 迁移后
export default (history) => combineReducers({
  router: connectRouter(history),
  /* 其他reducer */
})

在 React Native 中使用

React Native 需要使用 createMemoryHistory：

import { createMemoryHistory } from 'history'

const history = createMemoryHistory()

// 在组件中访问路由信息
function NativeScreen({ history }) {
  return (
    <View>
      <Text>当前路径: {history.location.pathname}</Text>
    </View>
  )
}

使用自定义 Context

从 react-redux v6 开始，可以传递自定义 Context：

const customContext = React.createContext(null)

ReactDOM.render(
  <Provider store={store} context={customContext}>
    <ConnectedRouter history={history} context={customContext}>
      {/* 应用内容 */}
    </ConnectedRouter>
  </Provider>
)

禁用初始位置变更

可以通过 noInitialPop 属性禁用初始的 LOCATION_CHANGE action：

<ConnectedRouter history={history} noInitialPop>
  {/* 路由配置 */}
</ConnectedRouter>

通过以上解答，开发者可以更好地理解和使用 connected-react-router 来解决实际开发中遇到的各种路由管理问题。该库的强大之处在于它将路由状态完全纳入 Redux 体系，使得路由变更可以像其他状态变更一样被追踪和管理。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考