React Router v5 nested routes inside separate component

Question

I'm trying to separate my authentication routes from app content routes:

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` }}
        />
    }
  />
);

Routing between login, signup and page1 routes works fine. But when I try to go to page2, the page gets blank.

What I'm doing wrong?

score 0 · Answer 1 · answered Sep 15 '20 at 12:54

I figured it out: I removed the exact attribute from Route and moved it at the end of the list in 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>

React Router v5 nested routes inside separate component

1 Answers1