将http重定向添加到React.js中的安全应用程序

npm install react-router-dom

import React from 'react';
import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom';
import HomePage from './components/HomePage';
import SecurePage from './components/SecurePage';

const App = () => {
  return (
    <Router>
      <Route exact path="/" component={HomePage} />
      <Route exact path="/secure" component={SecurePage} />
      <Redirect from="*" to="/" />
    </Router>
  );
};

export default App;

import React, { useEffect } from 'react';
import { Redirect } from 'react-router-dom';

const SecurePage = () => {
  useEffect(() => {
    if (window.location.protocol !== 'https:') {
      window.location.href = window.location.href.replace('http:', 'https:');
    }
  }, []);

  return (
    <div>
      <h1>Secure Page</h1>
      {/* 安全页面的内容 */}
    </div>
  );
};

export default SecurePage;