I am creating a website and in one place I use <Link to={product.id}> it does not show anything but when I wrote like this <p>{product.id}</p> it shows the id.
You can do the following
<Link
to={`/products/${product.id}`}
key={product.id}
>
...
</Link>
Related
I am building a Next.js app where some of the pages have in-page-routes one them. To accommodate this, I am using a catch-all (i.e. [[...slug]]) and handling the routes on that page itself. My folder structure looks like this:
While these routes work as expected, I am running into an issue where if I include an "as" prop to the Next.js Link component when referencing one of these catch-all pages, the href breaks, and the page refreshes to the "as" url. Here is my code:
import { useRouter } from "next/router";
import Link from "next/link";
export default function Header() {
const router = useRouter();
return (
<header>
<nav>
<ul>
<NavItem link="/">Logo</NavItem>
<NavItem link="/games/crash">Link Text</NavItem>
<NavItem link="/games/double">Link Text</NavItem>
<NavItem link="/games/mines">Link Text</NavItem>
<NavItem link="/profile">
<Profile />
</NavItem>
<NavItem link={router.asPath} as="/deposit">
<RoundPurpleButton />
</NavItem>
<MoreButton />
</ul>
</nav>
</header>
);
}
function NavItem({ children, link, as }) {
return (
<li>
<Link href={link} as={as}>
<a> {children}</a>
</Link>
</li>
);
}
All header elements link to their own page except the Purple Round button. For reasons (modal functionality) it links to the current page but displays a different url. I am using dynamic link building, passing an href and an as prop to the Next.js Link component. This is where I am getting strange behavior.
If I pass just a link everything works fine. You can see from the below picture each header and the link that it routes to (above the header element). In this scenario each header element, when clicked, takes you to the specified link.
The moment I add an "as" prop however, the round purple button displays the correct "link" and "as" attributes but when you click on it you see this message in the console: GET http://localhost:3001/_next/static/chunks/pages/games/double.js net::ERR_ABORTED 404 (Not Found) then the page refreshes to the "as" url.
I believe this issue has something to do with the Next.js catch-all links because I do not get this issue on statically typed link like "/", it's only on the catch-all links like "profile/[[...profile]]."
Does anyone have any ideas on how to fix this issue or how to properly structure the routes to allow for this functionality?
as is supposed to be a component (or a standard HTML component name like "a"). Currently, you're passing a path there. You may want to leave your as prop as as={as}
I'm using React router dom Link component. It is basically twitter's home feed. I want to be able to have two type of Links in one div component. One will be Link to go to user's profile and other one to go to post. I am currently getting warning and couldn't find solution for now. Here is the screenshot as reference:
I understand the issue here, my post Link is the parent element and I've added two user Link components inside of it as the user should be able to access post page when he clicks on anything inside of the post except user's profile photo and user's name. Is there any smarter way of achieving this and keeping links like this?
Code:
{posts?.map((post) => (
<Link
className={classes.link}
key={post.user.id}
to={`/posts/${post.id}`}
>
<div className={classes.post}>
<Link to={`/users/${post.user.id}`}>
<img
className={classes.profileImage}
src={DefaultLogo}
alt="default-profile"
/>
</Link>
<article className={classes.postDetails}>
<Link
className={classes.link}
to={`/users/${post.user.id}`}
>
<Typography
variant="subtitle1"
className={`${classes.postTitle} ${classes.content}`}
>
{post.user.name}
</Typography>
</Link>
<Typography
variant="subtitle1"
className={`${classes.postText} ${classes.content}`}
>
{post.body}
</Typography>
</article>
</div>
</Link>
))}
Yes, having anchor tags inside of another anchor tag is misleading a bad approach to doing things. But given your requirements you can make use of a basic button with react router dom history api.
A simple example:
import {Link, useHistory} from 'react-router-dom'
const App = () => {
const history = useHistory()
return (
<a
href='/user/1'
>
<h2>John doe</h2>
<div>here are some use information</div>
{/* Need to prevent the event bubbling */}
<Link role='link' to='/users/1/posts'>
User posts
</Link>
</div>
)
}
I have a sliding-menu component.
It has items and I want to hide the menu when I click on each item. But if i click on
Now I did so:
<nav onClick={this.handleClickCloseMenu}>
<Link
to="/smth"
activeClassName="is-active"
>
smth
</Link>
<Link
to="/smth2"
activeClassName="is-active"
>
smth2
</Link>
</nav>
Now I have an eslint errors: jsx-a11y/no-noninteractive-element-interactions end jsx-a11y/no-static-element-interactions
I can set role button to nav but i guess it is wrong way. What do you think about?
I thought a little and decided to tie into the key parameter, it's generated by react-router. In componentDidUpdate, look at the key and if the current one differs from the previous one, then hide the menu. If it is open of course. streletss thank you for pushing a thought
I am working on a portfolio and I'm using react.js. I simply want to click an image, for example, a StackOverflow icon, and be able to redirect to the page. I'm seeing all sorts of different ways to go about, yet I cannot get it to redirect.
I am using React-Bootstrap which I don't know if that is going to change anything.
export default class Home extends Component {
render() {
return (
<Grid>
<Jumbotron className="brainImg">
</Jumbotron>
<div class="footer"><center className="iconsBaby">
<Image src="giticon.png" className="githubIcon" to="https://github.com/Joeyryanbridges" />
<Image src="linkedinIcon.png" className="linkedinIcon" href="https://github.com/Joeyryanbridges" />
<Image src="SOFIcon.png" className="githubIcon" href="https://github.com/Joeyryanbridges" />
</center>
</div>
</Grid>
)
}
Thank you for looking.
Generally an Image component should not be a link on its own. What you should do is wrap your image component with an <a> tag or use the Link component if you're using react-router.
<a href="https://github.com/Joeyryanbridges">
<Image src="giticon.png" className="githubIcon" />
</a>
OR with react-router Link
<Link to="https://github.com/Joeyryanbridges">
<Image src="giticon.png" className="githubIcon" />
</Link>
This way the Image component is not concerned with redirects or changing URLs and that functionality is handled by the proper component or tag.
Always keep in mind that separation of concerns is very important when it comes to reusability and maintainability.
Just wrap tag inside an like this:
<a href="abc.com">
<Image src="abc.png" />
</a>
Or If you are using react-router,then you can do this:
import { Link } from "react-router-dom";
<Link to="www.abc.com">
<Image src="abc.png" />
</Link>
Hope this help:
1.You can first declare in the state
load:false
2.use the onClick event and call a function like -
<Image src="giticon.png" className="githubIcon" onClick={()=> handleClick()} />
Inside the function set load to true.
Now check the value of the load to direct to whatever you need.
I hope it works.
There is another method to it , which is just create a onclick attribute to your react element
<img src="<img-link>" alt="<alt-text>" onClick={link} />
and then outside the return statement of your react function you can use 2 methods to link the image which is
location.replace and location.href
both of which would have syntax as follow
window.location.href = "<link>";
and
window.location.replace("<link>");
the methode to use this both is as follow
const link= () => { //remember the onclick attribute mentioned in img tag is having name **link**
window.location.href = "<the-link-to-which-you-want-to-redirect";
}
in this way you can achive your desired output!!
line 6 contain the function and line 18 contain styled react image element... refer if you want
Note:-
window.locatio.replace("")
will replace the webpage , so some one clicking on the image would not be able to use back button of browser .
So use them according to your need!!
The easiest way I've found is to just make sure you add target="_blank" rel="noopener noreferrer" to your tag. Like this:
<a href={ resume } target="_blank" rel="noopener noreferrer">
<img className="resume" src={ resumeLogo } alt="Link to resume" />
</a>
To use an image as a link in React, wrap the image in an tag or a Link tag if using react-router. The image will get rendered instead of the link and clicking on the image will cause the browser to navigate to the specified page.
import {Link} from 'react-router-dom';
The function code can be as follows:
<div>
<Link to="/your-pagename-or-url">
<img src="https://hamedvahedi.com/sample.jpg" alt="" />
</Link>
</div>
I have a list of link-elements, the clicked link-element shall have another background-color. What is the best way to achieve that in react.js ?
render() {
return (
<div>
<Link></Link>
<Link></Link>
....
You should simply be able to apply the acctiveClassName attribute to the Link like so
<Link to="/about" activeClassName="active">About</Link>
see this link for more info.