We Keep Coding

Reactstrap navbar toggle not toggling in NextJS TypeScript project

I've installed Reactstrap on a project using the NextJS TypeScript install. I've copied the Navbar example from the Reactstrap docs. The navigation shows fine, but on mobile when I click the Navbar toggle, the toggle menu does not open. In fact, no JavaScript components from Reactstrap worked. I've tried modals as well, they don't work either.
Aside from the JavaScript not working when using the Reactstrap components, the Reactstrap CSS styles work completely fine.
Link to live project codesandbox to test.
Code for the Navbar specifically below:
import Link from "next/link";
import {
NavbarBrand,
NavbarToggler,
Collapse,
NavItem,
NavLink,
Nav,
Navbar,
} from "reactstrap";
import styles from "./Navigation.module.scss";
const Navigation = () => {
return (
<div className={styles.nav}>
<Navbar expand="md">
<NavbarBrand href="/">Premium Delivery</NavbarBrand>
<NavbarToggler onClick={function noRefCheck() {}} />
<Collapse navbar>
<Nav className="ms-auto" navbar>
<NavItem>
<NavLink>
<Link href="/">Home</Link>
</NavLink>
</NavItem>
<NavItem>
<NavLink>
<Link href="/services">Services</Link>
</NavLink>
</NavItem>
<NavItem>
<NavLink>
<Link href="/service-fees">Service Fees</Link>
</NavLink>
</NavItem>
<NavItem>
<NavLink>
<Link href="/about">About</Link>
</NavLink>
</NavItem>
<NavItem>
<NavLink>
<Link href="/contact">Contact</Link>
</NavLink>
</NavItem>
</Nav>
</Collapse>
</Navbar>
</div>
);
};
export default Navigation;

I don't know why, but their documentation on the Storybook puts the function noRefCheck() as a placeholder. You are meant to create your own function to activate the Reactstrap code as described in their Github examples:
https://github.com/reactstrap/reactstrap/blob/master/stories/examples/NavbarToggler.js
First, import useState so we can use the hook.
import { useState } from 'react';
Somewhere before the return, add a hook like
const [isOpen, setIsOpen] = useState(false);
Next, for the NavbarToggle, add the hook to the Event
<NavbarToggler onClick={() => { setIsOpen(!isOpen) }} />
Finally, ensure that the Collapse has the correct state
<Collapse isOpen={isOpen} navbar>
Navbar Contents
</Collapse>

URL not changing consistently in React router

I'm getting odd behavior using #reach/router. My aim is to have a page with tabs. When I click on a tab the url changes and the page changes (though it doesn't reload the whole page). I've been using chakra ui since it makes the theme making easier for me.
The behavior I get is odd. Sometimes the URL changes as I switch between tabs. It works great. Then sometimes the URL doesn't change, even though I've switched tabs.
My project is located here
import React from "react";
import { Router, Link } from "#reach/router";
import {
Tab,
Tabs,
TabList,
TabPanel,
TabPanels,
useColorModeValue
} from "#chakra-ui/react";
import Somatic from "../pages/somatic";
import Ef from "../pages/executive_functions_coaching";
import Intro from "../pages/home";
function ConceptTabs(props) {
const [tabIndex, setTabIndex] = React.useState(0);
return (
<>
<Tabs
size="lg"
isFitted
variant="soft-rounded"
colorScheme="yellow"
onChange={(index) => {
setTabIndex(index);
}}
>
<TabList>
<Tab>
<Link to="/">
Tab1
</Link>
</Tab>
<Tab>
<Link to="/executive_functions_coaching/">
Tab2
</Link>
</Tab>
<Tab>
<Link to="/somatics/">
Tab3
</Link>
</Tab>
</TabList>
<TabPanels p="2rem">
<TabPanel>
<Router>
<Intro path='/' />
</Router>
</TabPanel>
<TabPanel>
<Router>
<Ef path='/executive_functions_coaching/' />
</Router>
</TabPanel>
<TabPanel>
<Router>
<Somatic path='/somatics/' />
</ Router>
</TabPanel>
</TabPanels>
</Tabs>
</>
);
}
export default ConceptTabs;
I've tried to use <NavLink> but had similar issues.
I'm quite new to routing, but I've gotten this to work without the tabs. I'm wondering if there's a way to get the router to work with tabs?

It seems odd that you are mixing reach-router and react-router-dom, it's successor, but the root of your issue with the tabs is because each Tab component is rendering a Link but the entire tab isn't responsible for navigation.
Only the text part in the middle of each tab/button is the actual link, so the navigation only works if you precisely click on the text part of each tab that is the link.
To resolve you can render each Tab component as a Link component.
The as prop and custom component
<TabList>
<Tab as={Link} to="/">
tab1
</Tab>
<Tab as={Link} to="/executive_functions_coaching/">
tab
</Tab>
<Tab as={Link} to="/somatics/">
tab3
</Tab>
</TabList>

See as following 2 screenshots.
As you can see, 'a' tag is in a 'button' tag.
Real size of "a" is very small.
If you might click tab1, it is occured by button.
So, Please, Drew Reese's answer is fit you.
Thanks.

What you could do is to add onClick={()=>history.push('/route')} on your tabs.
Here is how to initialize history:
improt { useHistory } from 'react-router-dom';
// inside your component:
history = useHistory();

Using Reactstrap and Hashrouter, how do you use DropdownItem in the Navbar as a Navlink to other pages?

I built a simple react app using reactstrap and the Hashrouter function.
Hashrouter and NavLink are from react-router-dom
DropdownItem is from reactstrap
My Navbar is functional but clicking on the dropdown button (DropdownItem) to each page does nothing, while clicking directly on the passed text/NavLink element leads to the intended page. The reason for this is that the text shown in my dropdowns are fully passed NavLink elements which are wrapped in the dropdown button (DropdownItem).
Here is the link passed to the Navbar element
lookupLink={<NavLink to="/Lookup">Lookup</NavLink>}
And here is what the Navbar component side of things looks like
<DropdownItem>
{props.lookupLink && props.lookupLink}
</DropdownItem>
Image: Clicking on the blue text works, but anything to the right of the red line does nothing, where I want everything in the black border to act as a button
How would I ensure pressing any part of the entire DropdownItem element acts as a link to my Lookup page?
Appendix:
This is roughly what my index.js file looks like, after removing irrelevant parts of the code
<React.StrictMode>
<HashRouter>
<div>
<Navbar1
lookupLink={<NavLink to="/Lookup">Lookup</NavLink>}
/>
<div className="content">
<Route exact path="/" render={(props) => <HomePage
lookupLink={<NavLink style={{color:"white"}} to="/Lookup">Lookup</NavLink>}
/>} />
</div>
</div>
</HashRouter>
</React.StrictMode>

How can I display photos when I click dropdown items with React

I'm new to the world of React. I'm doing a simple react project with Ant Design. I have a dropdown menu in my project and I have items of this menu. I want to display photos on the screen dynamically when I click on the items.For example, When I click option 1, I want a photo to appear on the screen. When I click option 2, I want a different photo to appear on the screen etc... Alert pops up when i click on it now. But how can i display the photo. Please give me opinion. How can I do?
This is my code.
import React from "react";
import { Menu, Dropdown, Button, message } from "antd";
import "./SingleDropdown.css"
function SingleDropdown() {
function handleMenuClick(e) {
message.info("Image showed");
console.log("click", e);
}
const menu = (
<Menu onClick={handleMenuClick}>
<Menu.Item key="1">
Option 1
</Menu.Item>
<Menu.Item key="2">
Option 2
</Menu.Item>
<Menu.Item key="3">
Option 3
</Menu.Item>
</Menu>
);
return (
<div className="singledropdown">
<Dropdown overlay={menu}>
<Button className="button-color">
Dropdown
</Button>
</Dropdown>
</div>
);
}
export default SingleDropdown;

Your antd is able to do that.
Refer the link here
Futuremore, you may try to take a look at the API below, I think that helps :D
On the other hand, you may try onClick function in React, since I worked with react-bootstrap it worked, and I think antd is able to handle that too.
What I am trying to do is something like this:
const menu = (
<Menu onClick={handleMenuClick}>
<Menu.Item key="1" onClick={this.showPic1}>
Option 1
</Menu.Item>
<Menu.Item key="2" onClick={this.showPic2}>
Option 2
</Menu.Item>
<Menu.Item key="3" onClick={this.showPic3}>
Option 3
</Menu.Item>
</Menu>
);
*Show you some example how it works
onClick is a React function, this is the link You may brief around and see how that works :D

React bootstrap navbar not appropriate linking to other pages

I currently have an app with a few different pages, the routing works fine if I use the Link to component in the initial page, however from the navbar I get the message:
Cannot GET /page1
And I also noticed that the link on the top of the browser goes to: http://localhost:3000/page1 as opposed to http://localhost:3000/#/cities (like it would if I use Link to).
My current navbar code is this:
export class NavigationBar extends Component {
render(){
return(
<Navbar>
<Navbar.Header>
<Navbar.Brand>
Navbar
</Navbar.Brand>
</Navbar.Header>
<Nav>
<NavItem eventKey={1} href="/page1">Page1</NavItem>
<NavItem eventKey={2} href="/page2">Page2</NavItem>
</Nav>
</Navbar>);
}
}
If I just wrap the text up with Link to, it just works when we click on the text, which isn't what I want. What can I do so that the NavItem will behave like Link to but still look fine?
Thanks

I completely forgot that I need to wrap up each of my NavItem components with the LinkContainer from react-router-bootstrap.
That took care of everything.