混淆 react-router-dom 和 react-router-redux

Question

我是 React 和 redux 的新手，我从 react-router-dom 开始了我的项目，现在我希望在混合中添加 Redux。

我应该继续使用 react-router-dom 还是只安装 react-router-redux？或两者？ Route 组件的工作方式是否相同？我有点困惑，因为 react-router-dom 的用途是什么？

我是否将所有 Link 组件切换为向商店分派操作的 a 元素？

感谢您的帮助。

Answer 1

我会推荐你使用react-router-redux。使用 react-router-redux，您可以将您的路由器状态与您的 Redux Store 连接，这样您就可以使用与您用于与其余应用程序状态交互的相同 API 与路由器交互。

Answer 2

一般在使用Redux时，推荐使用react-router-redux，它封装了react-router

只有当你初始化你的应用程序时，你应该将一些东西从 react-router 传递给 Redux，它们是 Router 和 browserHistory。

在app.js中：

import { Router, browserHistory } from 'react-router';
import { syncHistoryWithStore } from 'react-router-redux';

const initialState = {};
const store = configureStore(initialState, browserHistory);

const history = syncHistoryWithStore(browserHistory, store);

const render = () => {
  ReactDOM.render(
    <Provider store={store}>
        <Router
          history={history}
          routes={rootRoute}
        />
    </Provider>,
    document.getElementById('app')
  );
};

您提供了 React 的 Router 元素作为 Redux 的 Provider 元素的子元素，并且您还为 Router 元素提供了 React 的 browserHistory 的 Redux 包装器。

在你项目的其余部分，你只需要使用react-router-redux，而不是直接调用React。

react-router-dom 顺便说一句，React 4 只是封装了 react-router 的另一层简化，但是如果你的项目架构是 Redux，那么你需要按照 Redux 的规则工作因此只使用 react-router-redux 以便在每个操作中通过商店（除了上述初始化）。

Answer 3

使用react-router-redux.

使用 react-router-redux 位置状态作为普通对象保存在您的 redux 存储中。这意味着您可以像任何其他状态一样使用 connect 注入位置信息。

混淆 react-router-dom 和 react-router-redux

Confusion react-router-dom and react-router-redux

reactjs

react-router

react-redux

react-router-redux

react-router-dom