Question

实际上，我创建了一个名为PrivateRouteLogin的第一级防护，以防止尚未登录的用户进入仪表板。注册流程具有3个步骤：如果未通过上一步，则用户无法继续前进，因此，我创建了另一个保护措施，以防止用户在未通过上一步的情况下进入第二和第三步，问题是用户转到第二步或第三步，路线已更改，但视图中没有任何内容。

第一级文件是：

import 'bootstrap/dist/css/bootstrap.css';
import React from 'react';
import { Route, Switch } from 'react-router-dom'
import Footer from '../containers/Footer'
import Landing from '../containers/Landing'
import Aml from '../components/investorOnboarding/Aml/index'
import Restricted from './Restricted';
import Dashboard from './Dashboard'
import Login from './Login';
import Register from './Register';
import InvestorOnboarding from './InvestorOnboarding';
import SignicatCallBack from '../components/Auth/SignicatCallBack';
import NavBar from '../components/NavBar'
import { PrivateRoute, PrivateRouteLogin } from './guards/PrivateRoutePresentation';

function App() {
  return (
    <div>
      <NavBar/>

      <Switch>
        <Route exact path="/"><Landing/></Route>
        <PrivateRoute path="/dashboard"><Dashboard/></PrivateRoute>
        <PrivateRouteLogin path="/login"><Login/></PrivateRouteLogin>
        <PrivateRouteLogin path="/register"><Register/></PrivateRouteLogin>
        <PrivateRouteLogin path="/onboarding/investor"><InvestorOnboarding/></PrivateRouteLogin>
        <PrivateRoute path="/aml"><Aml/></PrivateRoute>
        <PrivateRoute path="/restricted"><Restricted/></PrivateRoute>
        <Route path="/auth/callback"><SignicatCallBack/></Route>
      </Switch>

      <Footer/>
    </div>
  )
}

export default App;

我的警卫文件是：

import { Redirect, Route } from 'react-router';
import React from 'react';
import { connect } from 'react-redux';
import { FIXURA_TOKEN_NAME } from '../../constants';

export function PrivateRoutePresentation({ children, isAuthorized, pathname, ...rest }) {
  debugger
  return (
    <Route
      {...rest}
      render={({ location }) =>
        isAuthorized ? (
          children
        ) : (
          <Redirect
            to={{
              pathname,
              state: { from: location }
            }}
          />
        )
      }
    />
  )
}

export const PrivateRoute = connect(() => ({
  isAuthorized: !!localStorage.getItem(FIXURA_TOKEN_NAME),
  pathname: '/login'
}))(PrivateRoutePresentation);

export const PrivateRouteLogin = connect(() => ({
  isAuthorized: !!!localStorage.getItem(FIXURA_TOKEN_NAME),
  pathname: '/dashboard'
}))(PrivateRoutePresentation);

export const PrivateRouteRegister = connect(() => ({
  isAuthorized: false,
  pathname: '/register/identity-verification'
}))(PrivateRoutePresentation);

和续航路线为：

import BorrowerOnBoarding from '../containers/BorrowerOnBoarding/BorrowerOnBoarding'
import { Redirect, Route, Switch } from 'react-router'
import React from 'react'
import LoanRejection from '../components/borrowerOnboarding/components/LoanRejection'
import IdentityVerification from '../components/Auth/Register/IdentityVerification'
import TermsAndConditionsModal from '../components/Auth/Register/TermsAndConditionsModal'
import ProvideDetails from '../components/Auth/Register/ProvideDetails'
import VerifyPhoneNumber from '../components/Auth/Register/VerifyPhoneNumber'
import { PrivateRouteRegister } from './guards/PrivateRoutePresentation';

export default () => (
  <>
    <Route exact path="/register/legacy" component={BorrowerOnBoarding}/>
    <Route exact path="/register" component={RegisterRedirect}/>
    <Route path="/register/identity-verification" component={IdentityVerificationView}/>
    <PrivateRouteRegister path="/register/provide-details"><ProvideDetails/></PrivateRouteRegister>
    <Route path="/register/verify-phone-number" component={VerifyPhoneNumber}/>
    <Route path="/register/reject" component={LoanRejection}/>
  </>
)

const RegisterRedirect = () => (
  <Redirect to={{ pathname: '/register/identity-verification' }}/>
)

const IdentityVerificationView = () => (
  <>
    <IdentityVerification/>
    <Switch>
      <Route path="/register/identity-verification/terms-and-conditions"><TermsAndConditionsModal/></Route>
    </Switch>
  </>
);

Answer 1

您的私人路由器似乎无法正确呈现子组件


 <Route
  {...rest}
  render={({ location }) =>
    isAuthorized ? (
      // following line doesnt return react node
      children
    ) : (
      <Redirect
        to={{
          pathname,
          state: { from: location }
        }}
      />
    )
  }
/>

尝试这样


 <Route
  {...rest}
  render={({ location }) =>
    isAuthorized ? (
      // you can pass some props what you need as second parameter
      React.createElement(children, rest)
    ) : (
      <Redirect
        to={{
          pathname,
          state: { from: location }
        }}
      />
    )
  }
/>

以及以下链接将帮助您解决问题
https://reacttraining.com/react-router/web/api/Route/render-func

反应卫兵更改路线但不显示组件

1 个答案: