如何配合使用 React Router 4 和 Redux-JavaScript中文网-JavaScript教程资源分享门户

React Router 是 React 中常用的路由库，它可以帮助我们在应用中实现页面之间的跳转。然而，如果我们需要将路由状态保存在 Redux 中，就需要配合使用 React Router 4 和 Redux。

安装

首先，我们需要安装 React Router 4 和 Redux。可以使用以下命令进行安装：

npm install react-router-dom redux react-redux --save

配置路由

在使用 React Router 4 时，我们需要在应用的入口文件中配置路由。我们可以创建一个名为 App.js 的文件，并在其中导入 React Router 4 相关的组件和页面组件。下面是一个简单的示例：

// javascriptcn.com 代码示例
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { Provider } from 'react-redux';
import store from './store';
import Home from './components/Home';
import About from './components/About';

const App = () => (
  <Provider store={store}>
    <Router>
      <div>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
        </Switch>
      </div>
    </Router>
  </Provider>
);

export default App;

在上面的示例中，我们使用 BrowserRouter 组件作为路由容器，并在其中定义了两个路由规则，分别匹配根路径和 /about 路径。对于每个路由规则，我们都指定了相应的页面组件。

配置 Redux

接下来，我们需要配置 Redux。我们可以创建一个名为 store.js 的文件，并在其中定义 Redux 的 store。下面是一个简单的示例：

import { createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);

export default store;

在上面的示例中，我们使用 createStore 函数创建了一个 Redux 的 store，并传入了一个 rootReducer。这个 rootReducer 是一个函数，它用于将多个 reducer 合并为一个 reducer。我们可以在 reducers.js 文件中定义多个 reducer，并将它们合并为一个 rootReducer，如下所示：

import { combineReducers } from 'redux';
import { routerReducer } from 'react-router-redux';

const rootReducer = combineReducers({
  routing: routerReducer,
});

export default rootReducer;

在上面的示例中，我们使用 combineReducers 函数将 routerReducer 合并到了 rootReducer 中。这样，我们就可以将路由状态保存在 Redux 中了。

使用路由和 Redux

现在，我们已经配置好了路由和 Redux，接下来就可以在页面中使用它们了。我们可以在页面组件中导入 react-router-dom 和 react-redux 相关的组件，并使用它们来获取路由状态和 dispatch action。下面是一个简单的示例：

// javascriptcn.com 代码示例
import React from 'react';
import { connect } from 'react-redux';
import { push } from 'react-router-redux';

const Home = ({ push }) => (
  <div>
    <h1>Home</h1>
    <button onClick={() => push('/about')}>Go to About</button>
  </div>
);

export default connect(null, { push })(Home);

在上面的示例中，我们使用 connect 函数将组件连接到 Redux，并将 push action 作为 props 传递给组件。当用户点击按钮时，我们就可以使用 push action 来跳转到 /about 路径了。

总结

在本文中，我们介绍了如何配合使用 React Router 4 和 Redux。首先，我们需要在应用的入口文件中配置路由，并在其中定义路由规则和页面组件。接着，我们需要在 store.js 文件中定义 Redux 的 store，并将多个 reducer 合并为一个 rootReducer。最后，我们可以在页面组件中使用 react-router-dom 和 react-redux 相关的组件来获取路由状态和 dispatch action。

完整示例代码可以在 GitHub 上找到。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65698f3fd2f5e1655d22009d