介绍
选项卡是 Web 应用中对类似数据进行分组的关键元素。但是，React 中大多数选项卡实现都使用 React 状态来维护活动选项卡。这有以下限制：
- 刷新页面时无法保持活动选项卡
- 重定向到特定标签很麻烦
了解如何使用 URL 参数维护活动选项卡并利用 React Router Dom 来克服这些限制。
本指南假设您熟悉 React、React Hooks、React Router Dom、Bootstrap 和 Reactstrap。
设置
安装分为两个步骤：
- 设置 URL-Managed-Tabs React 应用程序
- 安装 Reactstrap
设置 URL-Managed-Tabs React 应用程序
使用 Create-React-App，这是一个可让您创建无需构建配置的 React 应用程序的脚手架。
确保你的机器上安装了create-react-app。如果没有，你可以通过运行以下命令来安装它：
npm install -g create-react-app
安装完成后，要创建应用程序，请运行以下命令：
npx create-react-app url-managed-tabs
上述命令创建一个名为url-managed-tabs 的React 应用。
导航到您的项目的根目录。
cd url-managed-tabs
您的文件夹结构应如下所示：
url-managed-tabs/
node_modules/
public/
src/
App.css
App.js
App.test.js
index.css
index.js
logo.svg
serviceWorker.js
setupTests.js
package.json
README.md
yarn.lock
要启动你的应用程序，请运行以下命令：
yarn start
安装 Reactstrap
首先，安装 bootstrap，这是 Reactstrap 包的先决条件。
npm install --save bootstrap
然后安装 Reactstrap 包。
npm install --save reactstrap
在src/index.js文件中导入 Bootstrap CSS 。
import 'bootstrap/dist/css/bootstrap.min.css';
发展
开发将分为以下步骤：
- 创建标签
- 安装 React-Router-Dom
- 使用 React Router Dom 创建带有可选参数的路由
- 重构选项卡以使用 URL active_page 参数
创建标签
打开 App.js 文件。清除里面的所有内容。
然后，创建一个名为tabs的对象，定义所有选项卡的标题和内容。
import React from 'react';
import {Row, Col} from 'reactstrap';
function App() {
const tabs = {
"draft": {
title: "Draft",
content: (
<Row className="p-2">
<Col sm="12" className="p-2">
<h4 className="text-info">Draft Tasks</h4>
</Col>
</Row>
)
},
"in_progress": {
title: "In Progress",
content: (
<Row className="p-2">
<Col sm="12" className="p-2">
<h4 className="text-primary">In Progress Tasks</h4>
</Col>
</Row>
)
},
"completed": {
title: "Completed",
content: (
<Row className="p-2">
<Col sm="12" className="p-2">
<h4 className="text-success">Completed Tasks</h4>
</Col>
</Row>
)
}
}
return (
<React.Fragment/>
);
}
export default App;
通过遍历 tabs 对象来创建选项卡。使用useState React hook 将activeTab属性添加到App组件的 React State 。使用您喜欢的选项卡属性名称初始化activeTab属性，在本例中为 in_progress。定义toggle函数来处理单击 NavLinks 时 activeTab 的变化。
import React from 'react';
import {Row, Col} from 'reactstrap';
function App() {
const tabs = {
"draft": {
title: "Draft",
content: (
<Row className="p-2">
<Col sm="12" className="p-2">
<h4 className="text-info">Draft Tasks</h4>
</Col>
</Row>
)
},
"in_progress": {
title: "In Progress",
content: (
<Row className="p-2">
<Col sm="12" className="p-2">
<h4 className="text-primary">In Progress Tasks</h4>
</Col>
</Row>
)
},
"completed": {
title: "Completed",
content: (
<Row className="p-2">
<Col sm="12" className="p-2">
<h4 className="text-success">Completed Tasks</h4>
</Col>
</Row>
)
}
}
const [activeTab, setActiveTab] = useState('in_progress');
const toggle = tab => {
if (activeTab !== tab) setActiveTab(tab);
}
return (
<div className="row p-4">
<div className="col-lg-12">
<h2 className="mb-4">Tasks</h2>
<Nav tabs>
{
Object.entries(tabs).map((tab) => (
<NavItem key={tab[0]}>
<NavLink
className={activeTab === tab[0] ? "active" : ""}
onClick={() => {
toggle(tab[0]);
}}
role="button"
>
{tab[1].title}
</NavLink>
</NavItem>
))
}
</Nav>
<TabContent activeTab={activeTab}>
{
Object.entries(tabs).map((tab) => (
<TabPane key={tab[0]} tabId={tab[0]}>
{tab[1].content}
</TabPane>
))
}
</TabContent>
</div>
</div>
);
}
export default App;
安装 React Router Dom
npm install --save react-router-dom
React Router 是 React 的路由库。React Router Dom 是 React Router 的 dom 绑定包。
使用 React Router Dom 创建带有可选参数的路由
不要直接在index.js中加载App组件，而是为App组件定义一个路由。
将index.js更改为：
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import {BrowserRouter, Switch, Route} from "react-router-dom";
ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<Switch>
<Route path="/:active_tab?" component={App}/>
</Switch>
</BrowserRouter>
</React.StrictMode>,
document.getElementById('root')
);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
/:active_tab?表示只要浏览器上的路由是/ ，则要加载的组件就是App。路由也可以接受参数，但这不是强制性的。例如：
- / - active_tab参数将未定义
- /in_progress - active_tab参数将为in_progress
所以让我们利用这一点，并确保即使在刷新页面时也能维持我们的活动标签。
重构标签以使用 URL active_page 参数
首先创建一个变量来保存默认的活动选项卡。jsx const DEFAULT_ACTIVE_TAB = "in_progress";可以使用 React Router Dom 的useParams钩子访问 URL 参数：jsx const {active_tab} = useParams();取消activeTab状态变量。 使用 React Router Dom 的useHistory钩子初始化历史变量，该变量用于导航。jsx const history = useHistory();如果URL 上未指定active_tab，则将active_tab<font
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
