URL not changing consistently in React router - javascript

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

Related

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>

react-scroll navigate and scroll to anchor from any page

I'm using react-scroll to scroll from the Nav to any preset anchor element.
I chose it because it also provides an active class to the Nav items when element is in viewport.
This exmple works if i'm on the HomePage. But if i click the navbar item from another page it doesn't work.
I need to make the scrolling work from another page as well.
Need to mention that all the Anchor Elements are on the HomePage and using create-react-app with v5 router.
CODESANDBOX example
Github issue link
PS: If you know any better library that can do this and add active class please post it here.
import { Element} from 'react-scroll';
export function HomePage() {
return (
<>
<title>Home</title>
<Banner />
<Element name="price-plan-list">
<PriceplanList />
</Element>
<Element name="entertainment-area">
<EntertainmentArea />
</Element>
</>
);
}
And this is the NavbarItem:
import { Link as AnchorLink } from 'react-scroll';
<NavItem key={index}>
<AnchorLink
activeClass="active"
to={item.link}
spy={true}
hashSpy={true}
duration={1000}
>
{item.title}
</AnchorLink>
</NavItem>

React material-ui navigate another html page and render an initial component in it

I am designing a web site using material-ui (https://material-ui.com/). I have toolbar with buttons. As usual, I want to navigate another html page when I click one of the buttons and render an initial component for new html page. For example, from 'Main Page' (for now, its localhost:3000/) to 'About' page (localhost:3000/About).
I tried something similar to this,
import { Link } from 'react-router-dom';
function ListItemLink(props) {
const { icon, primary, to } = props;
const CustomLink = props => <Link to={'/About'} {...props} />;
return (
<Button component={CustomLink} /> About
);
}
https://github.com/mui-org/material-ui/issues/10955 but it did not work. I searched many other methods but none of them is doing what I want. In the picture below, I have 'About' and 'News' folders under public folder. Each of them has its own index.html file. And I also have 'index.js' under src folder.
By default, nmp starts index.html under 'public' folder and execute index.js for this html file.
I want to make this scenario when I route other folders with button click.
Is there any preferrable way to do this ?
Thanks.
I recommend reading the documentation for React Router.
https://reactrouter.com/web/guides/quick-start
In the code below, the Switch component is what is used to see what should be rendered based on the Route components under it.
You need this switch logic setup or your buttons won't do anything.
import React from "react";
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
export default function App() {
return (
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/users">Users</Link>
</li>
</ul>
</nav>
{/* A <Switch> looks through its children <Route>s and
renders the first one that matches the current URL. */}
<Switch>
<Route path="/about">
<About />
</Route>
<Route path="/users">
<Users />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</div>
</Router>
);
}

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.

Categories