如何保护基于 iframe 的反应路由

Question

目前我有一个带有身份验证实现的反应路由器。它适用于简单的基于组件的路由。 这是我的 PrivateRoute 组件

import {  Route } from "react-router-dom";
import React from 'react';
import { Redirect } from 'react-router'

    export default function PrivateRoute ({component: Component, authed, ...rest}) {
        return (
          <Route
            {...rest}
            render={(props) => authed === true  
              ? <Component {...props} /> 
              : <Redirect to={{pathname: '/', state: {from: props.location}}} />} 
          /> 
        )
      }

这些类型的路由可以正常工作

<BrowserRouter>
        <Switch>
            <PrivateRoute authed={this.state.isAuthenticated} path='/register' component={RegisterPage} />
        </Switch>
    </BrowserRouter>

那些没有组件的路由会出现问题

<Route path="/route1" render={(props) => <iframe frameBorder={0} src={constans.urlRoute1} className="iframe" />} /> 

这是我提出的使其作为私有路由工作的解决方案，但问题是它缺少 url 重定向

<Route path="/route1" render={(props) => ((this.state.isAuthenticated) ? <iframe frameBorder={0} src={constans.urlRoute1} className="iframe" /> : <NewLandingPage {...props} /> )} />

那么如何使重定向与 iframe 一起工作？

Answer 1

将其作为答案发布，以防有​​人从 Google 偶然发现它：

<Route path="/route1" render={(props) => ((this.state.isAuthenticated) ? <iframe frameBorder={0} src={constans.urlRoute1} className="iframe" /> : <Redirect to='/my/link' /> )} />

我编辑了 ProtectedRoute，因此它也可以与 iframe 一起使用。

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

export default ({ component: Component, render: renderFn, authed, ...rest }) =>
  Component ? (
    <Route
      {...rest}
      render={props =>
        authed === true ? (
          <Component {...props} />
        ) : (
          <Redirect to={{ pathname: '/', state: { from: props.location } }} />
        )
      }
    />
  ) : (
    <Route {...rest} render={props => authed === true ? () => renderFn(props) : () => <Redirect to="my/link" />} />
  );

然后像这样调用 iFrame 路由：

<Route authed={this.state.isAuthenticated} path="/route1" render={props => <iframe frameBorder={0} src={constans.urlRoute1} className="iframe" />} />