Redux 实战：集成 React-Router 和处理路由-JavaScript中文网-JavaScript教程资源分享门户

前言

React-Router 是 React 生态圈中使用最广泛的路由库之一，它提供了强大的路由功能，方便我们构建单页应用和多页应用。而 Redux 则是 React 生态圈中最流行的状态管理库，它可以帮助我们更好地管理 React 应用中的状态。在本文中，我们将会介绍如何集成 React-Router 和处理路由，同时结合 Redux 管理状态，让我们的应用更加健壮和可维护。

环境准备

在开始本文之前，我们需要先准备好环境。我们需要安装 Node.js 和 npm，这里就不再赘述。然后，我们需要创建一个基于 create-react-app 的 React 项目，可以使用以下命令：

npx create-react-app my-app

安装完成后进入项目目录：

cd my-app

然后，我们需要安装 React-Router 和 Redux，可以使用以下命令：

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

集成 React-Router

首先，我们需要在应用中引入 React-Router。在 src 目录下创建一个名为 App.js 的文件，并添加以下代码：

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

const App = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route exact path="/about" component={About} />
        <Route exact path="/contact" component={Contact} />
        <Route component={NotFound} />
      </Switch>
    </Router>
  );
};

const Home = () => <h1>Home</h1>;
const About = () => <h1>About</h1>;
const Contact = () => <h1>Contact</h1>;
const NotFound = () => <h1>404 Not Found</h1>;

export default App;

在上面的代码中，我们使用了 BrowserRouter 和 Switch 组件来管理路由，然后我们定义了三个路由组件：Home、About 和 Contact。如果用户访问未定义的路由，我们将会显示一个 404 页面。现在，我们可以启动应用并访问路由了：

npm start

在浏览器中访问 http://localhost:3000/，你应该看到 Home 页面。

处理路由

现在，我们已经可以使用 React-Router 来管理路由了。但是，在实际开发中，我们通常需要处理更多的路由逻辑，例如获取路由参数、判断当前路由等等。为了更好地处理路由，我们可以将路由相关的逻辑放到 Redux 中。

首先，我们需要定义一个路由 reducer，用于管理路由相关的状态。在 src 目录下创建一个名为 reducers.js 的文件，并添加以下代码：

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

const initialState = {
  location: null,
};

const routerReducer = (state = initialState, action) => {
  if (action.type === LOCATION_CHANGE) {
    return {
      ...state,
      location: action.payload.location,
    };
  }
  return state;
};

export default routerReducer;

在上面的代码中，我们定义了一个名为 routerReducer 的 reducer，它可以根据不同的 action 类型来更新状态。当接收到 LOCATION_CHANGE action 时，我们将会更新 location 属性的值。

接下来，我们需要将路由 reducer 和 React-Router 集成。在 src 目录下创建一个名为 index.js 的文件，并添加以下代码：

// javascriptcn.com 代码示例
import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, combineReducers } from 'redux';
import { Provider } from 'react-redux';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { routerReducer, routerMiddleware } from 'react-router-redux';
import createHistory from 'history/createBrowserHistory';
import App from './App';
import './index.css';

const history = createHistory();
const middleware = routerMiddleware(history);
const rootReducer = combineReducers({
  router: routerReducer,
});

const store = createStore(
  rootReducer,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
  applyMiddleware(middleware),
);

ReactDOM.render(
  <Provider store={store}>
    <Router history={history}>
      <Switch>
        <Route exact path="/" component={App} />
        <Route exact path="/about" component={App} />
        <Route exact path="/contact" component={App} />
        <Route component={NotFound} />
      </Switch>
    </Router>
  </Provider>,
  document.getElementById('root'),
);

在上面的代码中，我们首先创建了一个 history 对象，用于管理浏览器的历史记录。然后，我们使用 routerMiddleware 将 history 对象与 Redux 集成，这样我们就可以在 Redux 中处理路由相关的逻辑了。接着，我们定义了一个 rootReducer，将路由 reducer 添加到根 reducer 中。最后，我们创建了一个 store，并将其传递给 Provider 组件，这样我们的应用就可以使用 Redux 了。

Redux 实战

现在，我们已经可以在 Redux 中处理路由相关的逻辑了。例如，我们可以根据当前路由来更新应用的标题。在 src 目录下创建一个名为 Title.js 的文件，并添加以下代码：

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

const Title = ({ location }) => {
  let title = 'My App';
  if (location && location.pathname === '/about') {
    title = 'About Us';
  } else if (location && location.pathname === '/contact') {
    title = 'Contact Us';
  }
  return <h1>{title}</h1>;
};

const mapStateToProps = state => ({
  location: state.router.location,
});

export default connect(mapStateToProps)(Title);

在上面的代码中，我们定义了一个名为 Title 的组件，并使用 connect 函数将其与 Redux 绑定。在组件中，我们根据当前路由来更新标题的内容。如果当前路由是 /about，我们将会显示 About Us，如果当前路由是 /contact，我们将会显示 Contact Us，否则我们将会显示默认的标题 My App。

现在，我们需要在应用中使用这个组件。在 App.js 文件中添加以下代码：

// javascriptcn.com 代码示例
import Title from './Title';

const App = () => {
  return (
    <>
      <Title />
      <Router>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route exact path="/about" component={About} />
          <Route exact path="/contact" component={Contact} />
          <Route component={NotFound} />
        </Switch>
      </Router>
    </>
  );
};

在上面的代码中，我们将 Title 组件添加到了应用中，并将其放在了 Router 组件的外部。这样，我们就可以在整个应用中使用 Title 组件，并根据当前路由来更新标题了。

总结

在本文中，我们介绍了如何集成 React-Router 和处理路由，同时结合 Redux 管理状态。我们首先使用 React-Router 来管理路由，然后将路由相关的逻辑放到 Redux 中。最后，我们使用 Redux 来更新应用的标题。通过这篇文章的学习，我们可以更好地理解 Redux 的使用，同时也可以更好地处理路由相关的逻辑。

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