使用 Redux 和 React Router 向应用添加基本 URL

2020-11-01 08:00飞浪

介绍

任何传统或单页应用的主要要素都是路由。路由是指从一个页面导航到另一个页面的能力。在典型的单页应用中，您可以使用 React Router 为您进行路由。但随着应用的增长和全局状态变得复杂，您可能需要使用像 Redux 这样的状态管理库。

该应用程序也可能运行在不同的路径（https://example.com/app）上，而不是在根域上，这增加了额外的复杂性。在本指南中，您将学习如何在 React Router 中设置基本 URL 以及如何无缝结合 Redux。

React-Router 示例

本节介绍如何使用 React Router 在简单的 React 应用中添加基本 URL。

安装 React-Router

第一步是在你的应用程序中安装react-router-dom依赖项。

      npm i react-router-dom

配置路线

接下来，将页面组件作为路由添加到应用程序中。

      const HomePage = () => {
  return (
    <div>
      <h2>Home</h2>
    </div>
  );
};

const ContactPage = () => {
  return (
    <div>
      <h2>Contact</h2>
    </div>
  );
};

const ProfilePage = () => {
  return (
    <div>
      <h2>Profile</h2>
    </div>
  );
};
    

将上述页面组件作为子组件传递给Route组件，并使用react-router-dom中的Switch组件包装。

      import { Route, Switch } from "react-router-dom";
// ...

const Main = () => {
  return (
    <div className="app">
      <Navbar />
      <div className="content">
        <Switch>
          <Route exact path="/">
            <HomePage />
          </Route>
          <Route path="/contact">
            <ContactPage />
          </Route>
          <Route path="/profile">
            <ProfilePage />
          </Route>
        </Switch>
      </div>
    </div>
  );
};
    

添加基本 URL

从react-router-dom导入BrowserRouter组件。BrowserRouter组件有一个basename prop，如果 React 应用程序托管在子目录中，则它接受一个字符串作为其值。

      import { BrowserRouter } from "react-router-dom";

const App = () => {
  return (
    <BrowserRouter basename="/app">
      <Main />
    </BrowserRouter>
  );
};
    

在BrowserRouter组件中添加basename可确保路由中的所有链接都以基本 URL 作为前缀。例如，<Link to='/contact' />将被呈现为<a href='/app/contact'>。

集成 Redux

在本节中，您将把 Redux 与上述 React Router 设置集成。

React Router 维护人员建议使用Connected-react-router软件包，以便更深入地集成 Redux。要安装Connected-react-router，请运行以下命令。

      npm i connected-react-router

创建历史对象

history对象可用于以编程方式更改浏览器的历史记录会话。要创建history对象，请从history包中导入createBrowserHistory函数并创建对象，如下所示。

      import { createBrowserHistory } from "history";

const history = createBrowserHistory();

history包是react-router-dom的依赖项，因此您不必再次安装它。

创建路由器连接商店

接下来，将 history 对象连接到 store。为此，从Connected-react-router包中导入connectRouter辅助函数并提供创建的 history 对象。

      import { connectRouter } from "connected-react-router";
import { createStore } from "redux";

const reducer = (initialState, action) => {
  // ...
};

const store = createStore(connectRouter(history)(reducer));
    

将 routerMiddleware 添加到 Redux

routerMiddleware会将历史操作分发到 Redux 存储。使用redux中的applyMiddleware辅助函数将routerMiddleware包含在应用程序中。

      import { connectRouter, routerMiddleware } from "connected-react-router";
import { createStore, applyMiddleware } from "redux";

const store = createStore(
  connectRouter(history)(reducer),
  applyMiddleware(routerMiddleware(history))
);
    

使用 ConnectedRouter 组件

您几乎已经完成了。最后一步是使用ConnectedRouter组件并将 history 对象作为 prop 传递。确保使用react-redux中的Provider组件包装ConnectedRouter组件。

      import { ConnectedRouter } from "connected-react-router";
import { Provider } from "react-redux";
    

      const App = () => {
  return (
    <Provider store={store}>
      <ConnectedRouter history={history}>
        <BrowserRouter basename="/app">
          <Main />
        </BrowserRouter>
      </ConnectedRouter>
    </Provider>
  );
};
    

结论

Redux 是 React 生态系统的重要组成部分，因此您需要了解如何集成 React-Router 和 Redux 以及它们如何协同工作。React Router 有一个关于深度 Redux 集成的精彩部分，您可能需要阅读它以更好地了解底层工作原理。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

曝光27964浏览1507

介绍