React-Router Внешняя ссылка
Поскольку я использую реагирующий маршрутизатор для обработки моих маршрутов в приложении реакции, мне любопытно, есть ли способ перенаправления на внешний ресурс.
Скажите, что кто-то нажимает
example.com/privacy-policy
Я хотел бы перенаправить его на:
example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies
Я нахожу абсолютно нулевую помощь во избежании написания этого на простом JS при моей загрузке index.html с чем-то вроде:
if ( window.location.path === "privacy-policy" ){
window.location = "example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies"
}
27 ответов
Я фактически закончил создание своего собственного Компонента. <Redirect>Это берет информацию от react-router элемент, чтобы я мог держать его в своих маршрутах. Такие как:
<Route
path="/privacy-policy"
component={ Redirect }
loc="https://meetflo.zendesk.com/hc/en-us/articles/230425728-Privacy-Policies"
/>
Вот мой компонент incase- кому-нибудь интересно:
import React, { Component } from "react";
export class Redirect extends Component {
constructor( props ){
super();
this.state = { ...props };
}
componentWillMount(){
window.location = this.state.route.loc;
}
render(){
return (<section>Redirecting...</section>);
}
}
export default Redirect;
РЕДАКТИРОВАТЬ - ПРИМЕЧАНИЕ: это с react-router: 3.0.5в 4.x не все так просто
Вот одна строка для использования React Router для перенаправления на внешнюю ссылку:
<Route path='/privacy-policy' component={() => window.location = 'https://example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies'}/>
Он использует концепцию компонента React pure, чтобы свести код компонента к единой функции, которая, вместо того чтобы что-либо отображать, перенаправляет браузер на внешний URL-адрес.
Работает как на React Router 3 и 4.
Это можно сделать с помощью компонента Link реактивного маршрутизатора. В опоре "to" вы можете указать 3 типа данных:
- строка: строковое представление местоположения ссылки, созданное путем объединения пути, поиска и хеш-свойств местоположения.
- объект: объект, который может иметь любое из следующих свойств:
- pathname: строка, представляющая путь для ссылки.
- поиск: строковое представление параметров запроса.
- hash: хеш для вставки в URL, например #a-hash.
- состояние: состояние, которое будет сохраняться в этом месте.
- функция: функция, которой текущее местоположение передается в качестве аргумента и которая должна возвращать представление местоположения в виде строки или объекта.
Для вашего примера (внешняя ссылка):
https://example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies
Вы можете сделать следующее:
<Link to={{ pathname: "https://example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies" }} target="_blank" />
Вы также можете передавать реквизиты, в которых вы хотели бы быть, такие как title, id, className и т. Д.
Там нет необходимости использовать <Link /> компонент от реакции-роутера.
Если вы хотите перейти на внешнюю ссылку, используйте тег привязки.
<a target="_blank" href="https://meetflo.zendesk.com/hc/en-us/articles/230425728-Privacy-Policies">Policies</a>
Просто используйте window.location
class RedirectPage extends React.Component {
componentDidMount(){
window.location.replace('http://www.google.com')
}
}
Я прошел через ту же проблему. Я хочу, чтобы мое портфолио перенаправлялось на страницы в социальных сетях. Раньше я использовал
{Link} from "react-router-dom". Это перенаправляло в подкаталог, как здесь,
Ссылка может использоваться для маршрутизации веб-страниц внутри веб-сайта. Если мы хотим перенаправить на внешнюю ссылку, мы должны использовать тег привязки. Как это,
Используя некоторую информацию здесь, я придумал следующий компонент, который вы можете использовать в своих объявлениях маршрута. Это совместимо с React Router v4.
Он использует машинописный текст, но должен быть довольно простым для преобразования в нативный javascript:
interface Props {
exact?: boolean;
link: string;
path: string;
sensitive?: boolean;
strict?: boolean;
}
const ExternalRedirect: React.FC<Props> = (props: Props) => {
const { link, ...routeProps } = props;
return (
<Route
{...routeProps}
render={() => {
window.location.replace(props.link);
return null;
}}
/>
);
};
И использовать с:
<ExternalRedirect
exact={true}
path={'/privacy-policy'}
link={'https://example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies'}
/>
Самое простое решение - использовать функцию рендеринга и изменить
window.location.
<Route path="/goToGoogle"
render={() => window.location = "https://www.google.com"} />
Если вам нужен небольшой компонент многократного использования, вы можете просто извлечь его следующим образом:
const ExternalRedirect = ({ to, ...routeProps }) => {
return <Route {...routeProps} render={() => window.location = to} />;
};
а затем используйте его (например, в коммутаторе маршрутизатора) следующим образом:
<Switch>
...
<ExternalRedirect exact path="/goToGoogle" to="https://www.google.com" />
</Switch>
Мне повезло с этим:
<Route
path="/example"
component={() => {
global.window && (global.window.location.href = 'https://example.com');
return null;
}}
/>
Я решил это самостоятельно (в своем веб-приложении), добавив тег привязки и не используя ничего из маршрутизатора React, просто простой тег привязки со ссылкой, как вы можете видеть на снимке экрана с использованием тега привязки в react.js приложение без использования маршрутизатора реакции
По сути, вы не перенаправляете своего пользователя на другую страницу внутри своего приложения, поэтому вы не должны использовать внутренний маршрутизатор, а использовать обычную привязку.
Хотя это решение, не поддерживающее реакцию, но вы можете попробовать.
В React Route V6 реквизиты рендеринга удалены. должен быть компонентом перенаправления.
URL-адрес перенаправления:
const RedirectUrl = ({ url }) => {
useEffect(() => {
window.location.href = url;
}, [url]);
return <h5>Redirecting...</h5>;
};
Маршрут:
<Routes>
<Route path="/redirect" element={<RedirectUrl url="https://google.com" />} />
</Routes>
Дополняя ответ Виктора Даниэля здесь: Ссылкаpathnameна самом деле приведет вас к внешней ссылке только тогда, когда перед ссылкой есть «https://» или «http://».
Вы можете сделать следующее:
<Link to={{ pathname:
> "https://example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies"
> }} target="_blank" />
Или, если ваш URL-адрес не содержит «https://», я бы сделал что-то вроде:
<Link to={{pathname:`https://${link}`}} target="_blank" />
В противном случае перед ним будет стоять текущий базовый путь, как прокомментировал Лоренцо Дематте .
В React Router v6,componentнедоступен. Вместо этого теперь он поддерживаетelement. Создайте компонент, перенаправляющий на внешний сайт, и добавьте его, как показано.
import * as React from 'react';
import { Routes, Route } from "react-router-dom";
function App() {
return(
<Routes>
// Redirect
<Route path="/external-link" element={<External />} />
</Routes>
);
}
function External() {
window.location.href = 'https://google.com';
return null;
}
export default App;
Я думаю, что лучшим решением будет просто использовать простой старый тег. Все остальное кажется запутанным. Маршрутизатор React разработан для навигации в одностраничных приложениях, поэтому его использование для чего-либо еще не имеет особого смысла. Создание целого компонента для чего-то, что уже встроено в
<a> тег кажется ... глупым?
Вы можете использовать для своего динамического URL
<Link to={{pathname:`${link}`}}>View</Link>
Я не думаю, что React-Router предоставляет такую поддержку. В документации упоминается
устанавливает перенаправление на другой маршрут в вашем приложении для поддержки старых URL-адресов.
Вы можете попробовать использовать что-то вроде React-Redirect
I'm facing same issue. Solved it using by
http:// или же
https:// в React js.
Вроде как:
<a target="_blank" href="http://www.example.com/" title="example">See detail</a>
Чтобы расширить ответ Алана, вы можете создать <Route/> это перенаправляет все <Link/>'с атрибутами "to", содержащими "http:" или "https:", на правильный внешний ресурс.
Ниже приведен рабочий пример этого, который можно разместить прямо в вашем <Router>.
<Route path={['/http:', '/https:']} component={props => {
window.location.replace(props.location.pathname.substr(1)) // substr(1) removes the preceding '/'
return null
}}/>
ДЛЯ V3, хотя это может работать для V4. Отвечая на ответ Relic, мне нужно было сделать немного больше, например, заняться локальной разработкой, где http не присутствует в URL. Я также перенаправляю на другое приложение на том же сервере.
Добавлено в файл роутера:
import RedirectOnServer from './components/RedirectOnServer';
<Route path="/somelocalpath"
component={RedirectOnServer}
target="/someexternaltargetstring like cnn.com"
/>
И компонент:
import React, { Component } from "react";
export class RedirectOnServer extends Component {
constructor(props) {
super();
//if the prefix is http or https, we add nothing
let prefix = window.location.host.startsWith("http") ? "" : "http://";
//using host here, as I'm redirecting to another location on the same host
this.target = prefix + window.location.host + props.route.target;
}
componentDidMount() {
window.location.replace(this.target);
}
render(){
return (
<div>
<br />
<span>Redirecting to {this.target}</span>
</div>
);
}
}
export default RedirectOnServer;
Сохраните эту html-страницу на своем диске под именем exampleLinkReact.html.
и откройте его в браузере, скажем, Chromium 115.
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>ExampleLinkReact</title>
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src='https://unpkg.com/react-router-dom@5.0.0/umd/react-router-dom.min.js'></script>
<script src='https://unpkg.com/babel-standalone@6.26.0/babel.js'></script>
</head>
<body>
<div id='root'></div>
<script type='text/babel'>
const Link = ReactRouterDOM.Link;
const Route = ReactRouterDOM.Route;
const ExampleLinkReact = () => (
<div style={removeallstyles}> {/*1*/}
<div style={container100postlist}>
<p style={style_label}> ExampleLinkReact </p>
<div style={hspace3}> </div>
<p> Open every link in new tab</p>
<div style={block1}>
<ReactRouterDOM.HashRouter>
<ul style={ulist_style}>
<li><Link to="/InnerComponent">InnerComponent</Link></li>
<li><Link to='/LocalHTMLPage'>LocalHTMLPage</Link></li>
<li><Link to='/LinkExternalUrl'>LinkExternalUrl</Link></li>
</ul>
<Route path="/InnerComponent" exact component={InnerComponent} />
<Route exact path="/LocalHTMLPage" render={() => {window.location.href="LocalHTMLPage.html"}} />
<Route exact path="/LinkExternalUrl" render={() => {window.location.href="https://example.com/1234"}} />
</ReactRouterDOM.HashRouter>
<div style={hspace3}> </div>
</div> {/*block1 end*/}
{/*/////////////////////////////////////////////////////////////////////////////////////*/}
{/*/////////////////////////////////////////////////////////////////////////////////////*/}
</div> {/*container100postlist*/}
</div> /*removeallstyles*/
)
//define InnerComponent
const InnerComponent = () => <h1>InnerComponent</h1>
///////////////////////////////////////////////////////////////////////////////////
{/*CSS CODE START. */}
//This is only elementary css, you can ignore it;
const removeallstyles = { all: 'revert',}
const hspace3={height: 0.05*window.innerHeight, backgroundColor: 'transparent', position: 'relative'};
const vhspace1={width: 0.05*window.innerWidth, backgroundColor: 'transparent', position: 'inline-block'};
//container100postlist
const container100postlist_width =94;
const container100postlist_border=1;
const container100postlist =
{
//margin:'0 auto',
//textAlign: 'center',
position: 'absolute',
width: container100postlist_width+'vw',
backgroundColor:'transparent',
display: 'block',
clear: 'both',
};
const style_label =
{
backgroundColor:'transparent',
marginTop: '1vh',
marginBottom: '1vh',
textAlign: 'left',
display: 'block',
clear: 'both',
position: 'relative',
fontWeight: 'bold',
};
var block1 =
{
textAlign: 'left',
float: 'left',
display: 'block',
clear: 'both',
padding: '0.5vw',
//height: '40%',
width: '97vw',
//backgroundColor:'red',
border: '0.1vh solid red',
};
const ulist_style =
{
//listStyle: 'none',
listStylePosition: 'inside',
paddingLeft: '1vw',
}
{/*CSS CODE END. */}
///////////////////////////////////////////////////////////////////////////////////
ReactDOM.render(<ExampleLinkReact />, document.querySelector('#root'));
</script>
</body>
</html>
Я предлагаю ответ, относящийся к React Router v6 для обработки динамической маршрутизации.
Я создал общий компонент под названием перенаправление:
export default function Redirect(params) {
window.location.replace('<Destination URL>' + "/." params.destination);
return (
<div />
)
}
Затем я назвал это в своем файле маршрутизатора:
<Route path='/wheretogo' element={<Redirect destination="wheretogo"/>}/>
import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
function App() {
return (
<Router>
<Route path="/" exact>
{window.location.replace("http://agrosys.in")}
</Route>
</Router>
);
}
export default App;
Если вы используете разрисовку на стороне сервера, вы можете использовать StaticRouter, С вашим context как props а затем добавив <Redirect path="/somewhere" /> компонент в вашем приложении. Идея заключается в том, что каждый раз, когда реагирующий маршрутизатор сопоставляет компонент перенаправления, он добавляет что-то в контекст, который вы передали статическому маршрутизатору, чтобы вы знали, что ваш путь соответствует компоненту перенаправления. теперь, когда вы знаете, что вы нажали перенаправление, вам просто нужно проверить, является ли это перенаправление, которое вы ищете. затем просто перенаправить через сервер. ctx.redirect('https://example/com'),
Используя React с Typescript, вы получаете ошибку, так как функция должна возвращать элемент реагировать, а не void, Таким образом, я сделал это таким образом, используя метод визуализации маршрута (и используя React router v4):
redirectToHomePage = (): null => {
window.location.reload();
return null;
};
<Route exact path={'/'} render={this.redirectToHomePage} />
Где вы могли бы вместо этого также использовать window.location.assign(), window.location.replace() так далее
вы можете использовать этот способ в React для перехода на другой веб-сайт
var link="www.facebook.com"
<a href={"https://"+link} target="/blank">target Button</a>
За использование
window.location.replace(), как показывают другие хорошие ответы, попробуйте использовать
window.location.assign().
window.location.replace() заменит историю местоположений без сохранения текущей страницы.
window.location.assign() перейдет на указанный URL-адрес, но сохранит предыдущую страницу в истории браузера, что обеспечит правильную работу кнопки возврата.
https://developer.mozilla.org/en-US/docs/Web/API/Location/replace https://developer.mozilla.org/en-US/docs/Web/API/Location/assign
Кроме того, если вы используете
window.location = url метод, как упоминалось в других ответах, я настоятельно рекомендую перейти на
window.location.href = url. По этому поводу ведется серьезная аргументация, поскольку многие пользователи, кажется, непреклонно хотят вернуть более новую версию.
object тип
window.location к его первоначальной реализации как
string просто потому, что они могут (и они вопиюще атакуют любого, кто говорит обратное), но теоретически вы можете прервать доступ других функций библиотеки к
window.location объект.
Посмотри на этот конво. Это ужасно. Javascript: настройка location.href по сравнению с местоположением
Мне удалось добиться перенаправления в реакции-маршрутизатор-дом, используя следующие
<Route exact path="/" component={() => <Redirect to={{ pathname: '/YourRoute' }} />} />
В моем случае я искал способ перенаправить пользователей, когда они посещают корневой URL http://myapp.com в другом месте в приложении http://myapp.com/newplace, так вышесказанное помогло.