리액트 라우터 외부 링크
리액트 라우터를 사용하여 리액트 앱에서 루트를 처리하고 있기 때문에 외부 리소스로 리다이렉트 할 수 있는 방법이 있는지 궁금합니다.
누군가 때린다고 가정해 보세요:
example.com/privacy-policy
다음 주소로 리다이렉트합니다.
example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies
내 index.html 로딩에서 플레인 JS로 쓰는 것을 피하는 데 전혀 도움이 되지 않습니다.
if ( window.location.path === "privacy-policy" ){
window.location = "example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies"
}
다음은 리액트 라우터를 사용하여 외부 링크로 리다이렉트하기 위한 한 줄입니다.
<Route path='/privacy-policy' component={() => {
window.location.href = 'https://example.com/1234';
return null;
}}/>
React pure component 개념을 사용하여 컴포넌트의 코드를 렌더링 대신 외부 URL로 브라우저를 리디렉션하는 단일 함수로 줄입니다.
리액트 라우터 3과 4 모두에서 동작합니다.
리액트 라우터의 Link 컴포넌트를 사용하면 이 작업을 수행할 수 있습니다."to" 프로펠러에서는 다음 3가지 유형의 데이터를 지정할 수 있습니다.
- 문자열: 위치의 경로 이름, 검색 및 해시 속성을 연결하여 만든 링크 위치의 문자열 표현입니다.
- 오브젝트:다음 속성 중 하나를 가질 수 있는 개체입니다.
- 경로 이름:링크처의 패스를 나타내는 문자열.
- search: 쿼리 파라미터의 문자열 표현.
- hash: URL에 넣을 해시입니다(예: #a-hash).
- state: 로케이션을 유지하는 스테이트.
- 함수: 현재 위치가 인수로 전달되어 문자열 또는 개체로 위치 표현을 반환해야 하는 함수
예(외부 링크)의 경우:
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" />
제목, 아이디, className 등 원하는 소품을 전달할 수도 있습니다.
.<Link />컴포넌트입니다.
외부 링크로 이동하려면 앵커 태그를 사용합니다.
<a target="_blank" href="https://meetflo.zendesk.com/hc/en-us/articles/230425728-Privacy-Policies">Policies</a>
리액트 라우터를 요구할 필요는 없습니다.이 작업은 기본적으로 수행할 수 있으며 브라우저에서 제공됩니다.
그냥 사용하다window.location
리액트 훅 포함
const RedirectPage = () => {
React.useEffect(() => {
window.location.replace('https://www.google.com')
}, [])
}
React 클래스 구성 요소 포함
class RedirectPage extends React.Component {
componentDidMount(){
window.location.replace('https://www.google.com')
}
}
또한 새 탭에서 열려는 경우에도 다음을 수행합니다.
window.open('https://www.google.com', '_blank');
결국 나만의 컴포넌트를 만들게 되었습니다. <Redirect>「 」로부터 정보를 합니다.react-router내 경로에서 계속 사용할 수 있도록 요소.예를 들어 다음과 같습니다.
<Route
path="/privacy-policy"
component={ Redirect }
loc="https://meetflo.zendesk.com/hc/en-us/articles/230425728-Privacy-Policies"
/>
여기 제 컴포넌트가 있습니다.궁금해하시는 분은, 다음과 같습니다.
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이치노
여기 있는 정보 중 일부를 사용하여 다음 컴포넌트를 생각해 냈습니다.이 컴포넌트는 경로 선언에 사용할 수 있습니다.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'}
/>
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★내 포트폴리오를 소셜 미디어 핸들로 리디렉션하고 싶다.는 ★★★★★★★★★★★★★★★★★★★★★★★★.{Link} from "react-router-dom". 되었습니다.
링크를 사용하여 웹 사이트 내의 웹 페이지를 라우팅할 수 있습니다.외부 링크로 리다이렉트 하려면 앵커태그를 사용해야 합니다.이것처럼.
가장 간단한 해결책은 렌더링 함수를 사용하여 이 기능을 변경하는 것입니다.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;
}}
/>
리액트 라우터를 사용하지 않고 리액트.js 앱에서 앵커 태그를 사용하는 이미지 스크린샷에서 볼 수 있듯이 리액트 라우터의 아무것도 사용하지 않고 앵커 태그를 추가하여 (웹 앱에서) 스스로 해결했습니다.
기본적으로 앱 내의 다른 페이지로 사용자를 라우팅하지 않으므로 내부 라우터를 사용하지 않고 일반 앵커를 사용해야 합니다.
이것은 비반응성 솔루션이지만 시도해 볼 수 있습니다.
동적 URL에 사용할 수 있습니다.
<Link to={{pathname:`${link}`}}>View</Link>
저도 같은 문제에 직면해 있습니다.를 했습니다.http:// ★★★★★★★★★★★★★★★★★」https://자, 그럼.
를 들면, '어리다'와 같이요.<a target="_blank" href="http://www.example.com/" title="example">See detail</a>
React-Router는 이 지원을 제공하지 않는 것 같습니다.문서에는 다음과 같이 기재되어 있습니다.
< 리다이렉트>는, 애플리케이션의 다른 루트로의 리다이렉트를 설정해, 낡은 URL 를 유지합니다.
대신 리액트 리다이렉트 같은 것을 사용해 보세요.
합니다.<Route/> 것을 리다이렉트합니다.<Link/>는 올바른 외부 리소스에 대해 "to:" 또는 "to:"를 포함하는 "to" 속성을 가집니다.
하겠습니다.<Router>.
<Route path={['/http:', '/https:']} component={props => {
window.location.replace(props.location.pathname.substr(1)) // substr(1) removes the preceding '/'
return null
}}/>
은 그냥 오래된 것을 합니다.<a>을 하도록 되어 있기 에 다른하는 것은 .리액트 라우터는 1페이지 어플리케이션 내 내비게이션용으로 설계되어 있기 때문에 다른 용도로 사용하는 것은 의미가 없습니다. 된 컴포넌트 것<a> 같은★★★★★★★★★★★★★★★★★★?
에서는 "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;
V3의 경우, V4에서는 동작할 수 있지만.에릭의 답변에서 벗어나 url에 http가 없는 지역개발을 처리하는 등 조금 더 해야 했습니다.또, 같은 서버의 다른 애플리케이션으로 리다이렉트 하고 있습니다.
라우터 파일에 추가됨:
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;
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;
React Route V6에서 렌더링 소품이 제거되었습니다.리다이렉트 컴포넌트여야 합니다.
RedirectUrl:
const RedirectUrl = ({ url }) => {
useEffect(() => {
window.location.href = url;
}, [url]);
return <h5>Redirecting...</h5>;
};
경로:
<Routes>
<Route path="/redirect" element={<RedirectUrl url="https://google.com" />} />
</Routes>
@ @vctor-daniel @vctor-daniel @Link'spathname는 실제로 할 수 것은 링크 에 '입니다.
다음을 수행할 수 있습니다.
<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" />
그렇지 않으면 @lorenzo-dematté 주석과 같이 현재 기본 경로 앞에 추가됩니다.
다이내믹 루팅을 처리하기 위한 리액트라우터 v6에 관한 답변을 제공합니다.
redirect라는 범용 컴포넌트를 만들었습니다.
export default function Redirect(params) {
window.location.replace('<Destination URL>' + "/." params.destination);
return (
<div />
)
}
다음으로 라우터 파일에서 호출했습니다.
<Route path='/wheretogo' element={<Redirect destination="wheretogo"/>}/>
합니다.voidRoute render （ React ）v4 ） 。
redirectToHomePage = (): null => {
window.location.reload();
return null;
};
<Route exact path={'/'} render={this.redirectToHomePage} />
대신 사용할 수도 있습니다.window.location.assign(),window.location.replace()타 etc
서버 측어를 사용하는 경우 버 딩 을 용 우 하 경 if you side, use사 server are)를 사용할 수 있습니다.StaticRouter. - 네, 엑스테네요. -네.와 함께context as ~하듯이props and then adding 그 후 추가<Redirect path="/somewhere" />앱에서 구성 요소컴포넌트를 사용할 수 있습니다.하실 수 .이제 리다이렉트를 눌렀다는 것을 알았기 때문에 찾고 있는 리다이렉트인지 확인하면 됩니다.그 후 서버를 통해 리다이렉트 합니다. ctx.redirect('https://example/com')
리액트 하여 외부 할 수 하려면 , 「Resact Link」에 합니다.이 때 오브젝트를 제공하면topathname 삭제:
<Link to={ { pathname: '//example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies' } } >
해야 할 JS를 사용할 수 .window.location.replace() ★★★★★★★★★★★★★★★★★」window.location.assign().
「 」의 사용 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: 위치 설정 중.href와 위치 비교
리액트 라우터돔에서 리다이렉트를 할 수 있었던 것은 다음과 같습니다.
<Route exact path="/" component={() => <Redirect to={{ pathname: '/YourRoute' }} />} />
제 경우 사용자가 루트 URL을 방문할 때마다 리다이렉트할 방법을 찾고 있었습니다.http://myapp.com앱 내의 다른 곳으로 이동합니다.http://myapp.com/newplace위의 내용이 도움이 되었습니다.
언급URL : https://stackoverflow.com/questions/42914666/react-router-external-link
'programing' 카테고리의 다른 글
| MySQL Workbench - 쿼리 오류 문제를 진단하는 방법 (0) | 2022.12.06 |
|---|---|
| 치명적 오류: 최대 실행 시간 30초를 초과했습니다. (0) | 2022.12.06 |
| vuex namesthed 모듈 상태에 대한 getter 및 setter를 생성하는 방법 (0) | 2022.12.06 |
| MySQL 5.7.10에서 JSON 데이터 유형 열을 업데이트하는 방법 (0) | 2022.12.06 |
| 데이터 잘라내기:1행의 'logo' 열에 대한 데이터가 너무 깁니다. (0) | 2022.12.06 |