Как реализовать архитектуру с lazy loading?

Question

[sergmit]

В проекте я использую lazy loading:

const Admin = React.lazy(() => import('./moduleAdmin/Index'))

class App extends React.Component {
  render () {
    const history = createBrowserHistory()
    return (
      <Router basename="/">
        <ConnectedRouter history={history}>
            <Suspense fallback={<Loader/>}>
              <Switch>
                <Route path="/admin" component={props => <Admin {...props} />}/>
                <Route path="/partner/:name" component={Partner}/>
                <Route
                  path="/"
                  component={() => <div>page not found</div>}
                />
              </Switch>
            </Suspense>
        </ConnectedRouter>
      </Router>
    )
  }
}

Подскажите как сделать, что бы модуль Admin загружался, только если пользователь авторизован

Answer 1

[Антон Спирин]

const AuthRoute = ({ component: Component, render, isSignedIn, ...rest }) => (
  <Route {...rest} render={props => {
    if (!isSignedIn) return (
      <Redirect to={{
        pathname: "/signin",
        state: { referrer: props.history.location.pathname }
      }} />
    );

    if (render) return render({ ...props });

    return <Component {...props} />;

  }} />
);

const mapStateToProps = state => ({
  isSignedIn: isSignedInSelector(state),
});

export default connect(mapStateToProps)(AuthRoute);

<AuthRoute path="/admin" component={Admin} />

Ну и совсем простое решение без переадресации:

<Switch>
  {isSignedIn && <Route path="/admin" component={Admin} />}
  <Route path="/partner/:name" component={Partner}/>
  <Route component={() => <div>page not found</div>} />
</Switch>

Answer 2

[sergmit]

Проблема в том, что значение isSignedIn. приходит с сервера, надо как-то делать асинхронно

Как сделал:
RouteAdmin.js:

const NotAccess = (props) => {
  return (
    <div>
     Доступ закрыт
    </div>
  )
}

export default class RouteAdmin extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      component: null
    }
  }

  componentDidMount () {
    axios.post('/admin').then(data => data.data).then(data => {
      if (data.auth === true) {
        const Admin = React.lazy(() => import('./moduleAdmin/Index'))
        this.setState({component: Admin})
      } else {
        this.setState({component: NotAccess})
      }
    })
  }

  render () {
    const Component = this.state.component
    return (
      <Route path="/admin" {...this.props} render={this.state.component}/>
    )
  }
}

<Route path='/admin' render={props => <RouteAdmin {...path} />} />