如何在React Router 4/5中有条件地呈现包装组件

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

const ConditionalWrapper = ({ condition, wrapper, component: Component, ...rest }) => {
  return (
    <Route {...rest} render={props => (
      condition ? (
        React.createElement(wrapper, null, <Component {...props} />)
      ) : (
        <Component {...props} />
      )
    )} />
  );
};

export default ConditionalWrapper;

import React from 'react';
import { BrowserRouter as Router, Switch } from 'react-router-dom';
import ConditionalWrapper from './ConditionalWrapper';
import Home from './Home';
import AdminHome from './AdminHome';

const App = () => {
  const isAdmin = true; // 根据条件来决定是否渲染包装组件

  return (
    <Router>
      <Switch>
        <ConditionalWrapper
          condition={isAdmin}
          wrapper={AdminLayout} // 包装组件
          component={AdminHome} // 子组件
          path="/admin"
          exact
        />
        <ConditionalWrapper
          condition={!isAdmin}
          wrapper={DefaultLayout} // 包装组件
          component={Home} // 子组件
          path="/"
          exact
        />
      </Switch>
    </Router>
  );
};

export default App;