使用页面 URL 和 React Router Doms 处理标签页

2020-09-29 08:00:00 · 飞浪

了解如何使用 URL 参数和利用 React Router Dom 而不是使用 React 状态来维护活动选项卡。

介绍

选项卡是 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

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

_查看原文

技术指南

阅读全文

使用页面 URL 和 React Router Doms 处理标签页

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

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

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;

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();