React で外部 URL にリダイレクトする

Rana Hasnain Khan 2022年4月18日
React で外部 URL にリダイレクトする

React で外部 URL にリダイレクトする方法を紹介します。

React で外部 URL にリダイレクトする

別のパスにリダイレクトする場合はいつでも、状態を変更してコンポーネントを再レンダリングできます。ただし、外部 URL にリダイレクトする必要がある場合もあります。

外部 URL へのリダイレクトを理解するために、例を示します。

この例では、ユーザーを外部リンクにリダイレクトするナビゲーションメニューを作成します。まず、index.html ファイルにクラス rootdiv を作成します。

# react
<div id="root"></div>

次に、Reactrender、および 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'));

出力:

react redirect

ユーザーが privacy メニューをクリックするたびに、外部 URL にリダイレクトされます。

Rana Hasnain Khan avatar Rana Hasnain Khan avatar

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