Tabbed Navigation working fine on localhost, but not in the deployed version

34 Views Asked by At

I am using Semantic UI React's tab component to make a page switcher (no routes). Everything was working perfectly, till last month, when I am unable to navigate to another tab in the deployed version. On localhost the code is running fine, and the tabs work perfectly. Don't know what happens when the website is deployed and running. Would love to hear any fixes/ similar experiences.

I am using Firebase to host my website. And here is the tabbedNavigation code

import { Menu, Grid } from "semantic-ui-react";
import PageA from "./PageA";
import PageB from "./PageB";
import PageC from "./PageC";

class TabbedNavigation extends Component {
  state = { activeItem: "Alpha" };
  handleItemClick = (e, { name }) => this.setState({ activeItem: name });

  render() {
    const { activeItem } = this.state;

    return (
      <div>
        <Grid centered>
          <Menu pointing secondary>
            <Menu.Item
              name="Alpha"
              active={activeItem === "Alpha"}
              onClick={this.handleItemClick}
            />
            <Menu.Item
              name="Beta"
              active={activeItem === "Beta"}
              onClick={this.handleItemClick}
            />
            <Menu.Item
              name="Gamma"
              active={activeItem === "Gamma"}
              onClick={this.handleItemClick}
            />
          </Menu>
        </Grid>

        {/* ________________________________________________________________________________ */}
        {/* Active Tabs and respective content */}

        {activeItem === "Alpha" ? (
            <PageA />
        ) : null}

        {activeItem === "Beta" ? (
            <PageB />
        ) : null}

        {activeItem === "Gamma" ? (
            <PageC />
        ) : null}
      </div>
    );
  }
}

export default TabbedNavigation;

Also spotted this warning in the console

Warning: ReactDOM.render is no longer supported in React 18. 
Use createRoot instead. Until you switch to the new API, your 
app will behave as if it's running React 17. Learn more: 
https://reactjs.org/link/switch-to-createroot
0

There are 0 best solutions below