Reactjs 将选中的 react-bootstrap 选项卡键 # 添加到当前 URL

Posted 2023-02-22

【中文标题】Reactjs 将选中的 react-bootstrap 选项卡键 # 添加到当前 URL

【英文标题】：Reactjs adding the selected react-bootstrap tab key # to the current URL

【发布时间】：2020-10-11 18:23:37

【问题描述】：

我的组件包含“React Bootstrap Tab”，如果用户选择这三个选项卡中的任何一个，我希望添加到当前 url：-

http://localhost:3000/账户

选中的tab键名，所以url变化如下：-

http://localhost:3000/account#messages

我曾尝试在 onSelect 函数中使用 props.history.push，但没有任何反应。

import React from "react";
import KhatmaTable from "../components/Account/KhatmasTable";
import Square from "../components/Account/Square";
import Messages from "../components/Account/Messages";
import  Tabs, Tab  from "react-bootstrap";

class Account extends React.Component 
  constructor(props) 
    super(props);
    this.state = 
      user: ,
      khatmas: [],
      selectedKey: this.props.location.hash
        ? this.props.location.hash.substring(1)
        : "home",
    ;
  

  render() 
    const count = [this.state.khatmats];
    console.log(this.state.user);
    console.log(this.state.user.khatmas ? this.state.user.khatmas.length : "");
    return (
      <div className="card">
        <div className="card-body">
          <Tabs
            id="controlled-tab-example"
            activeKey=this.state.selectedKey
            onSelect=(k) => 
              this.setState( selectedKey: k );
              this.props.history.replace = "account" + "#" + k;
            
          >
            <Tab eventKey="home" title="home">
              <div className="row">
                <Square />
              </div>
            </Tab>
            <Tab eventKey="khatmat" title="profile">
              <KhatmaTable />
            </Tab>
            <Tab eventKey="messages" title="messages">
              <Messages />
            </Tab>
          </Tabs>
        </div>
      </div>
    );
  

export default Account;

【参考方案1】：

在渲染之前编写下面的函数并根据需要修改替换函数内的值部分?tab=$key。

handleSelect = (key) => 
    this.setState( key );
    this.props.history.replace(
        hash: `$key`
    )

在Tabs里面，添加函数名如下图

<Tabs onSelect=this.handleSelect >

希望这会有所帮助。

【讨论】：

这在切换标签按钮时很有意义。但反向似乎不起作用。

【参考方案2】：

如果有人需要上面@Niraj 回答的功能作为反应钩子。

import React from "react";
//import bootstrap components
import Tabs from 'react-bootstrap/Tabs';
import Tab from 'react-bootstrap/Tab';

const TabComponent = (props) => 
    //set state from url hash
    const [selectedTab, setSelectedTab] = useState(props.location.hash.substring(1));

    const handleSelect = (e) => 
        //set state
        setSelectedTab(e);
        //update url
        props.history.replace(
            hash: `$e`
        );
    

    return (
        //set active key, if no url hash set default to home
        <Tabs 
            activeKey=selectedTab ? selectedTab : 'home'
            onSelect=(e) => handleSelect(e)
        >
            <Tab eventKey="home" title="home">
            ....
            </Tab>
            <Tab eventKey="about" title="about">
            ....
            </Tab>
        </Tabs>
    );

export default TabComponent;