Here I am creating a button in which when I click on button, it redirects to another page. Now the problem arises when I am setting className="btn". If I didn't use btn in className then this div is clickable but when I am setting className="btn" then This button is not clickable.
<div className="btn col">
<Link to={`/category/${category.slug}`}>{category.name}</Link>
</div>
Firstly, If you can show on your post your css code, It will be helpful to understand what is happening and to let people test it.
First Solution (useHistory)
I do not know if you have experience using React Router (https://reactrouter.com/web/api/Hooks) but what you can do is to add an onClick event to the div element and call history.push(). I let you an example below
import { useHistory } from "react-router-dom";
function Home() {
let history = useHistory();
function handleClick() {
history.push("/page");
}
return (
<div onClick={handleClick}>
Go to a page
</div>
);
}
Second Solution
I am not sure about what is happening with your css code but I am sure about is a z-index problem. Probably div is over your link component and you cannot click on it. I've found this post (Links not working inside div) check if implementing the solution, it solvers your problem
Related
I made a go Back button on a page which moves user from current page to a previous one. It works fine on PC and Android devices but it doesn't on iOS. Unfortunatelly I don't have a Mac to take a look at devtools to understand what's happening. Might be someone knows how to fix that? I suspect that the reason might be in useParams and React Router, but I don't know...
GoBack.tsx
interface IGoBackLinkProps {
text: string;
}
const GoBackLink: React.FC<IGoBackLinkProps> = ({ text }) => {
const history = useHistory();
return (
<Link className={styles.link} to='/' onClick={() => history.goBack()}>
{text}
</Link>
);
};
export default GoBackLink;
I use this component in this way:
SomeOtherCOmponent = () => {
const {id} = useParams
...
return (
<GoBackLink text={'Назад'} />
...
)
}
The <Link /> component from react-router-dom, by default, will render an <a> tag and it will use the path from the to prop as the href. So your Link is probably rendering something like this but with an onClick event handler:
<a href="/">
Go Back
<a>
When the user clicks this link, the onClick event is dispatched and then the anchor tag takes you to '/'.
One way to fix this would be to just use a button instead of Link:
<button onClick={() => {history.goBack()}}>
Go Back
</button>
If you must use the Link component or an a tag, e.preventDefault() in your onClick handler may also work.
I'm using Next.js for my application and I'm facing some issues on routing to the previous route of the application. I'm aware of the router function back() which is similar to window.history.back(), I would like to go back to the route when a Link is clicked, and if the previous link isn't from my application or is null, I would like to go to the home page as a default.
I used libraries like react-router-last-location for my react app, but I wanna see if there are better ways to do it in Next.js via next/router.
Here is my sample code:
<div className={styles['icon-container']}>
<Link href="/"><a>
<img src="icon.svg"></img>
</a></Link>
</div>
if i use router.back() in the href input, the page goes back automatically even before it loads, how do i solve this issue?
<Link> can't go outside of your app. (but router.back() can)
You can't use router.back() directly in the code, you need to do something like :
<img onClick={() => router.back()} src="icon.svg" />
<Link> does not have onClick property.
import { useRouter } from 'next/router'
export default function Page() {
const router = useRouter()
return (
<button type="button" onClick={() => router.back()}>
Click here to go back
</button>
)
}
Source of info here
I am very new to React (React hooks, etc). My task is to open up a page when clicked on a button. I do not want to change the url in this case. Just open up a new page (just load the new page component on the main page)?
Example,
export function MainPage(){
const [new_page, openNewPage] = useState('');
return (
<header className = "styling_headers">
<button onClick = {() => openNewPage("SetNewPage")} > Click Me </button>
{if (new_page==="SetNewPage")?<NewComponent></NewComponent>: null{""}}
</header>
)
}
Now, after clicking on the button "Click Me", I just want to open a new page completely without changing the URL (ie, keeping the main page url when clicked on the button and moving to the new page), this means that the new page would just be a component of the main page. I do not want to use routers just for opening the new page. I do not want the contents of the main page to reflect on the new page either. It should be a fresh page with only the contents of the new page. How do I achieve this?
-- The new page component --
export function NewComponent (){ // maybe some props will be passed here when clicked on the button.
return (
<div> This is the new page when clicked on the button </div>
)
}
Please can someone modify the above code or direct me in how I can link the NewComponent Page when clicked on the "Click Me" button on the main page without using routers? React hooks or any other React solution is welcome.
I would really appreciate any help. I googled a lot about this, but still haven't found the solution for this. Please help!
Thank you.
If you really don't want to use react-router you can use plain React state and render component accordingly on the current state. Something like this
function MainPage(){
const [page, setPage] = useState("");
return(
<header className = "styling_headers">
<button onClick={() => setPage("MAIN_PAGE")}>
Change to main page
</button>
<button onClick={() => setPage("OTHER_PAGE")}>
Change to other page
</button>
{page === "MAIN_PAGE" ? <MainPage/> : null}
{page === "OTHER_PAGE" ? <OtherPage/> : null}
</header>
)
}
Again you should only use this if you app is small. If your app is big enough doing this may make you app very complicated, consider that you may have other logic in the app
I am trying to create a simple "Back" button in Gatsby that returns the the previous page and retains the scroll position. This already happens when using the browser back button, but I'm struggling to produce a custom one. I've read in the Reach Router docs that you can add -1 as an argument to the navigate function to return to previous locations, but It instead throws the number value into the url and gives me a 404. Can someone give me an idea of what I've done wrong? Or if anyone else has managed to make a functional back button for Gatsby projects?
Here is my code-
import React from 'react';
import { graphql, navigate } from 'gatsby'
import Img from "gatsby-image"
import "./design.scss"
const designTemplate = (props) => {
return (
<section className="design">
<div className="design__container">
<h2 className="design__title">
{props.data.design.title}
</h2>
<Img className="design__image" fluid={props.data.design.localImage.childImageSharp.fluid} />
<p className="design__summary">
{props.data.design.summary}
</p>
</div>
<button onClick={navigate(-1)}>Go Back</button>
</section>
);
}
The issue you're having here is just that you didn't define a callback function for your onClick handler.
Instead of this:
<button onClick={navigate(-1)}>Go Back</button>
…you want to do this:
<button onClick={() => { navigate(-1) }}>Go Back</button>
Your onClick must have a callback(arrow function) like this
onClick={()=>{navigate(-1)}}
not
navigate(-1)
I am using TypeScript in React. I would like to create custom alerts and add to them images. I used
this method:
private alert() {
alert("This is an Alert Dialog");
}
Do you have any idea how to customize it?
Thans in advance for tips.
What you may want to look for is a modal box,
as you could style that so display alerts.
This page can help you get started:
https://www.w3schools.com/howto/howto_css_modals.asp
Or look into bootstrap which simplifies modals a lot:
https://getbootstrap.com/docs/4.0/components/modal/
The alert box is a system object, and not subject to CSS. You might want to use a third party library for that or add your own alert popup. Either way you can't style the default alert box.
You need to use modals. Here it is a sample:
import React from "react";
export const Modal = ({modalContent, style}) => {
return (
<div className="modal" style={style}>
{modalContent}
</div>
);
};
And usage is like this:
import { Modal } from '../Shared/Modal';
....
{this.state.Modal && <Modal style={{ animation: "fadeIn 1s, scaleUp 1s" }}
modalContent={
<div className="Add-BillRange">
<h1> MODAL </h1>
</div>
}
/>}
this.state.Modal controls if the modal should be showed or not.