Redirect redirect to another domain
I am using react router for client side routing. I have a button and when someone clicks the button, I want to redirect the user to a different url. For example, I want to redirect a user to " http://www.google.com ". I used the navigation mixin and used this.transitionTo (" https://www.google.com "). But when I do this, I get this error Invariant violation: Cannot find a route named https://www.google.com .
I can use window.location, but is this the correct way?
source to share
You don't need react-router
for xrefs, you can just use regular link elements (like JSX <a href="..."/>
).
react-router
you only need it when you have internal navigation (ie Component to Component) for which the browser URL bar should look like your application is actually switching "real" URLs.
source to share
As pointed out in the comments to this answer, the default solution to this problem will be an anchor element (tag a
) with an attribute href
that points to the destination URL you want to direct the user to. A button that looks like a button but its behavior or binding is largely a web anti-pattern. For details, see this answer:. Fooobar.com/questions/338130 / ... .
However, there is certainly a potential scenario where a web application needs to take some action and only then redirect the user. In this case, if the main action the user takes is sending some data, or actually performing the action, and the redirect is more of a side effect, then the original question is valid.
In that case, why not use an location
object property window
? It even provides a good functional method for going to an external location. See the link .
So if you have a component say
class Button extends Component {
render() {
return (
<button onClick={this.handleClick.bind(this)} />
);
}
}
then add handleClick
to make the component look like
class Button extends Component {
handleClick() {
// do something meaningful, Promises, if/else, whatever, and then
window.location.assign('http://github.com');
}
render() {
return (
<button onClick={this.handleClick.bind(this)} />
);
}
}
There is no need to import window
as it is global. Should work fine in any modern browser.
Also, if you have a component that is declared as a function, you can use an effect hook to change location when state changes, like
const Button = () => {
const [clicked, setClicked] = useState(false);
useEffect(() => {
if (clicked) {
// do something meaningful, Promises, if/else, whatever, and then
window.location.assign('http://github.com');
}
});
return (
<button onClick={() => setClicked(true)}></button>
);
};
source to share
I couldn't find an easy way to do this with React Router. As @Mike wrote, you have to use anchor (tags <a>
) when submitting a user to an external site.
I created a custom component <Link>
to dynamically decide whether to display a React-Router <Link>
tag or a regular tag <a>
.
import * as React from "react";
import {Link, LinkProps} from "react-router-dom";
const ReloadableLink = (props: LinkProps & { forceReload?: boolean }) => {
const {forceReload, ...linkProps} = props;
if (forceReload)
return <a {...linkProps} href={String(props.to)}/>;
else
return <Link {...linkProps}>
{props.children}
</Link>
};
export default ReloadableLink;
source to share
As @Mike 'Pomax' Kamermans points out, you can simply use to navigate to an external link.
I usually do it like this, with is-internal-link
import React from 'react'
import { Link as ReactRouterLink} from 'react-router-dom'
import { isInternalLink } from 'is-internal-link'
const Link = ({ children, to, activeClassName, ...other }) => {
if (isInternalLink(to)) {
return (
<ReactRouterLink to={to} activeClassName={activeClassName} {...other}>
{children}
</ReactRouterLink>
)
}
return (
<a href={to} target="_blank" {...other}>
{children}
</a>
)
}
export default Link
Disclaimer: I am the author of this internal link
source to share