reactjs - React：如何在 App 结构的两种布局中使用 {props.children}

问题描述

我在 React 中创建了一个系统，每个页面都会检查用户是否经过身份验证，这意味着他已登录。

但是我的页面有两种不同的布局，{props.children}当两种布局中的任何一个被加载时，它们都使用这导致一个空页面，并且错误消息：

TypeError: Cannot read property 'children' of undefined
CustomLayout
.../src/containers/Layout.js:129
  126 |     </div>
  127 |   </div>
  128 | </div>
> 129 | <div
      | ^  130 |   className={
  131 |     active ? 'main-content-wrapper' : 'main-content-wrapper-collapsed'
  132 |   }

我的 App.js 结构如下所示：

const App = () => (
  <Provider store={store}>
    <Router>
      <div className='App'>
          <CheckAuthenticated>
            <Switch>
              <Route path='/login' exact component={NormalLoginForm} />
              <Route path='/signup' exact component={SignUp} />
              <Route path='/reset_password' exact component={ResetPassword} />
              <Route path='/password/reset/confirm/:uid/:token' component={ResetPasswordConfirm} />
              <Route path='/activate/:uid/token' component={Activate} />
            </Switch>
          </CheckAuthenticated>
          <CustomLayout>
            <Navbar />
              <Switch>
                <Route path='/' exact component={Home} />
                <Route path='/profile' exact component={Profile} />
              </Switch>
            </CustomLayout>
      </div>
    </Router>
  </Provider>
);

<CheckAuthenticated>仅包含 useEffect 函数，该函数检查用户是否经过身份验证并且不为子级提供 JSX 布局：

const CheckAuthenticated = (props) => {
    useEffect(() => {
        const fetchData = async () => {
            try {
                await props.checkAuthenticated();
                await props.load_user();
            } catch (err) {

            }
        }

        fetchData();
    }, []);

    return (
        <div>
            {props.children}
        </div>
    );
};

export default connect(null, { checkAuthenticated, load_user })(CheckAuthenticated);

它还包含 useEffect 函数，该<CustomLayout>函数检查用户是否经过身份验证，但也有 JSX，它是应用程序仪表板的布局，还有一个 {props.children} 部分：（
这是 {props.children} 的一小部分)

      <div className={ active ? 'main-content-wrapper' : 'main-content-wrapper-collapsed' }>
        {props.children}
      </div>

是否不可能在应用程序结构中使用 {props.children} 两次，是否有解决方案使每个页面仍检查身份验证但应用程序仍具有两种不同的布局？

标签： reactjsreact-reduxreact-router

reactjs - React：如何在 App 结构的两种布局中使用 {props.children}

问题描述

解决方案

推荐阅读