时间戳

首页 > 解决方案 > React Router v5 嵌套路由在单独的组件中

reactjs - React Router v5 嵌套路由在单独的组件中

问题描述

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

应用程序.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` }} />}
  />
);

登录、注册和 page1 路由之间的路由工作正常。但是当我尝试转到第 2 页时，页面变为空白。

我做错了什么？

标签： reactjsreact-routerreact-router-v5

解决方案

我想通了：我从 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>

推荐阅读