使用 Redux 和 React Router 向应用添加基本 URL
介绍
任何传统或单页应用的主要要素都是路由。路由是指从一个页面导航到另一个页面的能力。在典型的单页应用中，您可以使用 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 集成的精彩部分，您可能需要阅读它以更好地了解底层工作原理。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~