Question

目前，我有一个具有身份验证实现的React路由器。它可以与基于简单组件的路由一起很好地工作。这是我的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" />} />

这是我提出的使它作为专用路由工作的解决方案，但是问题是缺少网址重定向

<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" />} />

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

1 个答案: