React Router v5嵌套路由位于单独的组件中

问题描述

我正在尝试将身份验证路由与应用内容路由分开：

App.jsx：

        <browserRouter history={history}>
          <Switch>
            <Route exact path={`${process.env.REACT_APP_ROUTE_PREFIX}`} component={PrivateRouteWrapper} />
            <Route exact path={`${process.env.REACT_APP_ROUTE_PREFIX}/login`} component={LoginPage} />
            <Route exact path={`${process.env.REACT_APP_ROUTE_PREFIX}/signup`} component={SignupPage} />
          </Switch>
        </browserRouter>

PrivateRouteWrapper.jsx：

        <React.Fragment>
            <PrivateRoute exact path={process.env.REACT_APP_ROUTE_PREFIX}
                component={Page1}
                titleText={"Quest"}
                titleVisibility={true} />
            <PrivateRoute exact path={`${process.env.REACT_APP_ROUTE_PREFIX}/page2`}
                component={Page2} />
            <MyComponentSharedBetweenPages />
        </React.Fragment>

PrivateRoute.jsx：

const PrivateRoute = ({ component: Component,...rest }) => (
  <Route
    {...rest}
    render={props => loggedIn
      ? <Component {...props} />
      : <Redirect to={{ pathname: `${process.env.REACT_APP_ROUTE_PREFIX}/login` }} />}
  />
);

在登录，注册和第1页路由之间进行路由可以正常工作。但是，当我尝试转到第2页时，页面空白。

我做错了什么？

解决方法

我知道了： 我从Route中删除了确切的属性，并将其移至App.jsx中列表的末尾：

        <BrowserRouter history={history}>
          <Switch>
            <Route exact path={`${process.env.REACT_APP_ROUTE_PREFIX}/login`} component={LoginPage} />
            <Route exact path={`${process.env.REACT_APP_ROUTE_PREFIX}/signup`} component={SignupPage} />
            <Route path={`${process.env.REACT_APP_ROUTE_PREFIX}`} component={PrivateRouteWrapper} />
          </Switch>
        </BrowserRouter>