Develop Reference

Ho to pass react-router-dom link userid through props?

I have six components which I want to redirect to six different links
import Post from "../post/Post";
import ".//posts.css";
export default function Posts() {
return (
<div className="flex-container">
<Post title="2BHK 2Bath" rent="20000" redirect="1" />
<Post title="3BHK 2Bath" rent="25000" redirect="2" />
<Post title="1BHK 1Bath" rent="14000" redirect="3" />
<Post title="3BHK 3Bath" rent="30000" redirect="4" />
<Post title="2BHK 2Bath" rent="18000" redirect="5" />
<Post title="1BHK 1Bath" rent="10000" redirect="6" />
</div>
);
}
Post.jsx
export default function Post({ title, rent, redirect }) {
return (
<div className="post">
<img
className="postImg"
src="https://www.thespruce.com/thmb/aGEhef5NbpY6R_Fahn5fIW8SAHk=/941x0/filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/put-together-a-perfect-guest-room-1976987-hero-223e3e8f697e4b13b62ad4fe898d492d.jpg"
alt=""
/>
<div className="postInfo">
<div className="postCats"></div>
<span className="postTitle">
<Link
to={{ pathname: "/post/{redirect}" }}
className="link"
>
{title}
</Link>
</span>
<hr />
<span className="postDate">Rent: {rent}/-</span>
</div>
</div>
);
}
This does not work, clicking on the first post with redirect: 1 redirects me to this URL http://localhost:3000/post/%7Bredirect%7D
I also tried making it like this from a stackoverflow answer
<Link
to={{ pathname: "/post", state: { redirect } }}
className="link"
>
{title}
</Link>
But this also did not work.
How I can make so that, I can pass the redirect_id through the props of the components.
Example:
When I click on component of <Post title="2BHK 2Bath" rent="20000" redirect="1" /> it should redirect me to http://localhost:3000/post/1
How can I do this?

you can try using template string
<Link to={{ pathname: `/post/${redirect || 0}` }} className="link">
{title}
</Link>

react-router-dom link to another page

Problem:
when clicking the link, the address is parsing the value of the "to" properties of the Link in the react-router-dom, please see the output:
http://localhost:3000/https://xxxxxx.github.io/
import React from 'react';
import { Link } from 'react-router-dom';
const Footer = () => {
return (
<footer className='footer-light bg-light'>
<div
className='text-center p-3'
>
<Link
className='text-decoration-none text-dark'
to='https://xxxxxxx.github.io/'
>
© {new Date().getFullYear()} Copyright
</Link>
</div>
</footer>
);
};
export default Footer;
I want to redirect to another page when clicking the link

You can either pass a string, object, function to the to prop to redirect to a specific URL.
Here's how to do with each of them
String:
<Link to="https://google.com">Click me</Link>
Object:
<Link to={{ pathname: "https://google.com" }} target="_blank">Click me</Link>
Function:
<Link to={location => ({ ...location, pathname: "https://google.com" })} />
Works for both external URLs as well as localhost.
Docs: https://reactrouter.com/web/api/Link

you can try this :
<Link to={{ pathname: "https://xxxxxxx.github.io/" }} target="_parent" rel="noopener noreferer">
© {new Date().getFullYear()} Copyright
</Link>
this will open https://xxxxxxx.github.io/ in the same tab.
or,
<Link to={{ pathname: "https://xxxxxxx.github.io/" }} target="_blank" rel="noopener noreferer">
© {new Date().getFullYear()} Copyright
</Link>
this will https://xxxxxxx.github.io/ in a new tab.

Warning: Function components cannot be given refs

I'm using Next.js latest version for making my blog website, don't know why show me error, when I'm trying to make my form then show me error like this:
Warning: Function components cannot be given refs.
Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
I'm tried below code:
import React, { useState } from "react";
import { APP_NAME } from "../config";
import Link from "next/link";
import {
Collapse,
Navbar,
NavbarToggler,
NavbarBrand,
Nav,
NavItem,
NavLink,
} from "reactstrap";
const Header = () => {
const [isOpen, setIsOpen] = useState(false);
const toggle = () => setIsOpen(!isOpen);
return (
<div>
<Navbar color="light" light expand="md">
<Link href="/">
<NavbarBrand className="font-weight-bold">{APP_NAME}</NavbarBrand>
</Link>
<NavbarToggler onClick={toggle} />
<Collapse isOpen={isOpen} navbar>
<Nav className="m-auto" navbar>
<NavItem>
<Link href="/signup">
<NavLink style={{ cursor: "pointer" }}>Signup</NavLink>
</Link>
</NavItem>
<NavItem>
<Link href="/signin">
<NavLink style={{ cursor: "pointer" }}>Signin</NavLink>
</Link>
</NavItem>
</Nav>
</Collapse>
</Navbar>
</div>
);
};
export default Header;
please give me your valuable suggestion.

The easiest solution may be to wrap your NavLink with a native html element. In your case:
<Link href="/signup" passHref>
<a>
<NavLink style={{ cursor: "pointer" }}>Signup</NavLink>
</a>
</Link>

From the official documentation: if-the-child-is-a-function-component shows the right way when you wrap a custom function component within Link.
Add passHref attribute in Link.
Wrap your custom function component with React.forwardRef.
However, the NavbarBrand is not a component which you can manipulate. You can create a custom component to wrap NavbarBrand. It probably like
const CustomNavbarBrand = React.forwardRef(({ onClick, href }, ref) => {
return (
<NavbarBrand href={href} onClick={onClick} ref={ref}>
Click Me
</NavbarBrand>
)
})
<Link href="/" passHref>
<CustomNavbarBrand>{APP_NAME}</CustomNavbarBrand>
</Link>
Check the valid property which can be passed to NavbarBrand since I haven't use the reactstrap before.

This worked for me:
<Link href="/">
<div className="navbar-brand">
<a>{APP_NAME}</a>
</div>
</Link>
Instead of using the NavbarBrand component I just added the class navbar-brand

Solution :
Wrapp with anchor tag (a tag)
use passHref attribute
<Link href='/' passHref>
<a>
<Image src='logo.png' width="50px" height="50px" />
</a>
</Link>

Wrapping the child component in an a (anchor) tag resolved my issue.
Steps to reproduce :
Wrap around a component with the Link tag from Next JS
import Link from 'next/link'
import Image from 'next/image'
<Link href="/">
<Image width="100%"
height="100%"
src="/logo.png"
alt="Blitztech Electronics Logo" />
<Link>
Solution :
passing the 'important' passHref attribute
Wrapping the entire children in a a tag

There is a better way to solve this issue: whenever you are going to add a child tag under Link tag, such as an Image tag, just wrap them under a div or a tag. Here is the example:
<Link href="/">
<div>
<Image
src={Logo}
alt={TagName.COMPANY_NAME}
width={80}
height={80}
onClick={handleClicked}
/>
</div>
</Link>

Just Wrap it in anchor tag. it will work fine.
<Link href="/">
<a>{APP_NAME}</a>
</Link>

NextJs Tooltip with #tippyjs/react

<Link href="/company/add" >
<a title="My New Title" data-toggle='tooltip' className="btn btn-primary">My Link</a>
</Link>
A typical Nextjs Link about works while and adding Tippy Component looks as simple as show below but this dosent work.
<Tippy content="My Tooltip">
<Link href="/company/add" >
<a title="My New Title" data-toggle='tooltip' className="btn btn-primary">My Link</a>
</Link>
</Tippy>
If anyone has done this successfully I will appreciate your help. I don't if there is about other tooltip that works easily with NextJs

This works:
<Tippy content="hi">
<div>
<Link href="/">
<a>
Home Page
</a>
</Link>
</div>
</Tippy>
Even MaterialUIs Tooltip works the same way.

Try this it's working for me.
<Link href="/company/add" >
<Tippy content="My Tooltip">
<a title="My New Title" data-toggle='tooltip' className="btn btn-primary">My Link</a>
</Tippy>
</Link>

External Link with React

I'm totally new with React and I'm facing off a problem with an external Link. I would like to use it for a redirection to GitHub every time I click on the icon but actually the new window is not showing up instead I have this URL :
http://localhost:3000/https://github.com. I don't why it is not working because with my footer i have almost the same code and it is working well. If you have solutions for that it will be much appreciated ! Thank you very much
Carditem.js
import React from 'react';
import { Link } from 'react-router-dom';
function CardItem(props) {
return (
<>
<li className='cards__item'>
<Link className='cards__item__link' >
<figure className='cards__item__pic-wrap' data-category={props.label}>
<img
className='cards__item__img'
alt='Travel '
src={props.src}
/>
</figure>
<div className='cards__item__info'>
<h5 className='cards__item__text'>{props.text}</h5>
<Link
class='social-icon-card-github'
to={{ pathname: "https://github.com" }}
<i class='fab fa-github' />
</Link>
</div>
</Link>
</li>
</>
);
}
export default CardItem;
Footer.js
import React from 'react';
import './Footer.css';
import { Link } from 'react-router-dom';
function Footer() {
return (
<div className='footer-container'>
<section class='social-media'>
<div class='social-media-wrap'>
<small class='website-rights'>© 2020</small>
<div class='social-icons'>
<Link
class='social-icon-link github'
to={{ pathname: "https://github.com" }}
target='_blank'
aria-label='Github'
>
<i class='fab fa-github' />
</Link>
<Link
class='social-icon-link codepen'
to={{ pathname: "https://codepen.io" }}
target='_blank'
aria-label='Codepen'
>
<i class='fab fa-codepen' />
</Link>
<Link
class='social-icon-link Linkedin'
to={{ pathname: "https://www.linkedin.com" }}
target='_blank'
aria-label='LinkedIn'
>
<i class='fab fa-linkedin' />
</Link>
</div>
</div>
</section>
</div>
);
}
export default Footer;

react-router is used for internal navigation, if you want to navigate outside of your website you should use an a element:
<a
class='social-icon-link github'
href="https://github.com"
target='_blank'
rel="noopener"
aria-label='Github'
>
<i class='fab fa-github' />
</a>
The rel="noopener" is a good security practice: https://mathiasbynens.github.io/rel-noopener/

You cannot call external links with react-router-dom's Link component. Try the following:
Link
You can also open links in a new tab:
Link in new tab

If your URL coming from the API's you can use like that
<Link to={{ pathname:`https://${strFacebook}`}} target="_blank"> Facebook </Link>

Hope you have understood.
The main fact is you need to use tag instead of tag.
Side by side you have to endure that the url must start with "https:" else it will always redirect to localhost:........
for example, if you write Github it will not work. You have to write Gitbuh

the link element is not closed
<Link
class='social-icon-card-github'
to={{ pathname: "https://github.com" }}>
<i class='fab fa-github' />
</Link>