React で外部 URL にリダイレクトする
Rana Hasnain Khan
2022年4月18日
React で外部 URL にリダイレクトする方法を紹介します。
React で外部 URL にリダイレクトする
別のパスにリダイレクトする場合はいつでも、状態を変更してコンポーネントを再レンダリングできます。ただし、外部 URL にリダイレクトする必要がある場合もあります。
外部 URL へのリダイレクトを理解するために、例を示します。
この例では、ユーザーを外部リンクにリダイレクトするナビゲーションメニューを作成します。まず、index.html
ファイルにクラス root
の div
を作成します。
# react
<div id="root"></div>
次に、React
、render
、および BrowserRouter
をインポートします。
# react
import React, { Component } from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
次に、メニューを作成します。
# react
const Menu = () => (
<div>
<ul>
<li>
<Link to="/privacy-policy">privacy</Link>
</li>
</ul>
</div>
);
render()
で、リダイレクトルーターを返します。index.js
のコードは次のようになります。
# react
import React, { Component } from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
const Menu = () => (
<div>
<ul>
<li>
<Link to="/privacy-policy">privacy</Link>
</li>
</ul>
</div>
);
class App extends Component {
constructor() {
super();
this.state = {
name: 'React',
};
}
render() {
return (
<Router>
<div>
<Menu />
<Route
path="/privacy-policy"
component={() => {
window.location.replace('https://example.com/1234');
return null;
}}
/>
</div>
</Router>
);
}
}
render(<App />, document.getElementById('root'));
出力:
ユーザーが privacy
メニューをクリックするたびに、外部 URL にリダイレクトされます。
Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.
LinkedIn