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.
Related
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>
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>
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>
I work on a dashboard project at my job and I'm need your help.
React, nextjs and material-ui are used in my application.
On this website, a Menu is defined with clickable links for navigate between page.
However, I can not use correctly <Link> from next/link.
In my application, I need to use <Link/> with something like that:
import Foo from './foo';
[...]
<Link href="/about" passHref>
<Foo />
</Link>
[...]
<Foo/> is defined in another file and contain a <a>.
Even if I pass passHref my link can't be clicked.
In real life, my application is more complicated and use material-ui but the problem seems to be present with this really simplified version : https://gist.github.com/Oyabi/4aea0ce2fa36029868641d147ba9e551
Here the code if gist is down or removed in future:
pages/index.jsx:
import React from "react";
import Menu from "../components/Menu";
function Home() {
return <Menu />;
}
export default Home;
components/Menu.jsx:
import React from "react";
import Link from "next/link";
import MenuItem from "./MenuItem";
function Menu() {
return (
<Link href="/about" passHref>
<MenuItem />
</Link>
);
}
export default Menu;
components/MenuItem.jsx:
import React from "react";
import Link from "next/link";
function MenuItem() {
return (
<div>
<a>not ok - link is not clickable even if the following lines are commented</a>
<br />
<Link href="/about" passHref>
<a>ok - link is clickable</a>
</Link>
<Link href="/about" passHref>
<a>ok - link is clickable</a>
</Link>
<Link href="/about" passHref>
<div className="useless">
foo
<a>even with something more complicated</a>
<br />
<a>the 2 links are clikable</a>
bar
</div>
</Link>
</div>
);
}
export default MenuItem;
If I surround my <a> between <Link> in the same file everything is ok and work as desired but it's not the case if I apply <Link> on a component.
As you can see, even if I setpassHref.
How can I make my <Link> works in Menu.jsx?
Regards.
Try replacing the surrounding div by a fragment like that:
function MenuItem() {
return (
<> // here
<a>not ok - link is not clickable even if the following lines are commented</a>
<br />
<Link href="/about" passHref>
<a>ok - link is clickable</a>
</Link>
<Link href="/about" passHref>
<a>ok - link is clickable</a>
</Link>
<Link href="/about" passHref>
<div className="useless">
foo
<a>even with something more complicated</a>
<br />
<a>the 2 links are clikable</a>
bar
</div>
</Link>
</> // and here
);
}
problem: trying to implement react router query parameters example on my local environment. code below from their website.
import React from "react";
import { BrowserRouter as Router, Link } from "react-router-dom";
function ParamsExample({ location }) {
let params = new URLSearchParams(location.search);
return (
<Router>
<div>
<p>
React Router does not have any opinions about how your parse URL query
strings. Some applications use simple key=value query strings, but
others embed arrays and objects in the query string. So it's up to you
to parse the search string yourself.
</p>
<p>
In modern browsers that support{" "}
<a href="https://developer.mozilla.org/en-US/docs/Web/API/URL">
the URL API
</a>
, you can instantiate a <code>URLSearchParams</code> object from{" "}
<code>location.search</code> and use that.
</p>
<p>
In{" "}
<a href="https://caniuse.com/#feat=url">
browsers that do not support the URL API (read: IE)
</a>{" "}
you can use a 3rd party library such as{" "}
query-string.
</p>
<div>
<h2>Accounts</h2>
<ul>
<li>
<Link to={{ pathname: "/account", search: "?name=netflix" }}>
Netflix
</Link>
</li>
<li>
<Link to={{ pathname: "/account", search: "?name=zillow-group" }}>
Zillow Group
</Link>
</li>
<li>
<Link to={{ pathname: "/account", search: "?name=yahoo" }}>
Yahoo
</Link>
</li>
<li>
<Link to={{ pathname: "/account", search: "?name=modus-create" }}>
Modus Create
</Link>
</li>
</ul>
<Child name={params.get("name")} />
</div>
</div>
</Router>
);
}
function Child({ name }) {
return (
<div>
{name ? (
<h3>
The <code>name</code> in the query string is "{name}"
</h3>
) : (
<h3>There is no name in the query string</h3>
)}
</div>
);
}
export default ParamsExample;
when rendering i get the following error message TypeError: Cannot read property 'search' of undefined which is pretty straight forward, but when i do location.search in my console i get the following output "?name=zillow-group" with that being said location.search is a valid property but not sure why react is not seeing it.
When you're logging location in the console, you are logging the window.location object. In your component, however, there is a location prop defined that takes precedence. It's not shown explicitly in the react-router example, but they are rendering the ParamsExample component somewhere and passing in the location prop.
You can access the react-router location prop (among others) by either using the withRouter hoc or by using the Route component. Here is an example:
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Link, Route } from "react-router-dom";
function ParamsExample() {
return (
<Router>
<div>
<p>
React Router does not have any opinions about how your parse URL query
strings. Some applications use simple key=value query strings, but
others embed arrays and objects in the query string. So it's up to you
to parse the search string yourself.
</p>
<p>
In modern browsers that support{" "}
<a href="https://developer.mozilla.org/en-US/docs/Web/API/URL">
the URL API
</a>
, you can instantiate a <code>URLSearchParams</code> object from{" "}
<code>location.search</code> and use that.
</p>
<p>
In{" "}
<a href="https://caniuse.com/#feat=url">
browsers that do not support the URL API (read: IE)
</a>{" "}
you can use a 3rd party library such as{" "}
<a href="https://github.com/sindresorhus/query-string">
query-string
</a>
.
</p>
<div>
<h2>Accounts</h2>
<ul>
<li>
<Link to={{ pathname: "/account", search: "?name=netflix" }}>
Netflix
</Link>
</li>
<li>
<Link to={{ pathname: "/account", search: "?name=zillow-group" }}>
Zillow Group
</Link>
</li>
<li>
<Link to={{ pathname: "/account", search: "?name=yahoo" }}>
Yahoo
</Link>
</li>
<li>
<Link to={{ pathname: "/account", search: "?name=modus-create" }}>
Modus Create
</Link>
</li>
</ul>
<Route
render={({ location }) => {
let params = new URLSearchParams(location.search);
return <Child name={params.get("name")} />;
}}
/>
</div>
</div>
</Router>
);
}
function Child({ name }) {
return (
<div>
{name ? (
<h3>
The <code>name</code> in the query string is "{name}"
</h3>
) : (
<h3>There is no name in the query string</h3>
)}
</div>
);
}
function App() {
return <ParamsExample />;
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);