Using ReactJS, how can I use Route to display different components?

Question

I'm new to ReactJS, and trying to establish whether I can use it for an app I'm building.

I've created the Sign In and Register pages, but I've got some of the same code in both of them, and I'd like to re-use it instead.

So, currently, I have two standalone pages, built as Components, and Routed like this:

const App = () => (
  <Router>
    <div>
      <Route path={ROUTES.REGISTER} component={RegisterPage} />
      <Route path={ROUTES.SIGNIN}   component={SignInPage} />
      <Route component={SignInPage} />
    </div>
  </Router>
);

so if I go to /register I see the RegisterPage component, and if I go to /signin I see the SignInPage component. (And if I go to anything else, I see the SignInPage.)

However, I have a few more pages to add, in the same style, and I'd like to be able to have a generic "Landing Page" which shows the appropriate component inside it. Then, once the user has signed in, I want a "Dashboard Page" which shows an appropriate component.

So, LandingPage and DashboardPage will just be wrappers for other components, and I want the Routes to work like this:

'landingpage/SignInPage' - shows the LandingPage style, with the SignIn component inside 'landingpage/Register' - shows the LandingPage style, with the Register component inside 'landingpage' - shows the LandingPage style, with the SignIn component inside 'dashboardpage/' - shows the default Dashboard

I thought I could do something like this:

const App = () => (
  <Router>
    <div>
      <Route path={ROUTES.LANDINGPAGE} component={LandingPage} subPage={SignInForm} />
      <Route path={ROUTES.REGISTER}    component={LandingPage} subPage={RegisterForm} />
      <Route path={ROUTES.SIGNIN}      component={LandingPage} subPage={SignInForm} />
      <Route path={ROUTES.DASHBOARD}   component={DashboardPage} subPage={Overview} />
      <Route component={LandingPage} subPage={SignInForm} />
    </div>
  </Router>
);

but I can't work out the exact syntax. Does "subPage" get passed in as state or a prop? How do I use that to render the page properly?

I can't find anything online to tell me how to do this, which makes me think I might be on the wrong lines. If so, what's the correct way?

Shubham Khatri · Accepted Answer · 2020-05-18 10:30:43Z

1

You need to make use of render props to pass on custom props to the rendered component

const App = () => (
  <Router>
    <div>
      <Route path={ROUTES.LANDINGPAGE}  render={(rProps) => <LandingPage {...rProps} subPage={SignInForm} />}/>
      <Route path={ROUTES.REGISTER}    render={(rProps) => <LandingPage {...rProps} subPage={RegisterForm} />}/>
      <Route path={ROUTES.SIGNIN} render={(rProps) => <LandingPage {...rProps} subPage={SignInForm} />}} subPage={SignInForm} />
      <Route path={ROUTES.DASHBOARD}  render={(rProps) => <DashboardPage {...rProps} subPage={Overview} />}} />
      <Route render={(rProps) => <LandingPage {...rProps} subPage={SignInForm} />} />
    </div>
  </Router>
);

However you can write a custom Route that renders the LandingPage as a layout like below

const RouteWithLayout = ({subPage, component: Component,...props}) => {
    return <Route {...props} render={(rProps) => <Component {...rProps} subPage={subPage} />} />
}

and use it like

const App = () => (
  <Router>
    <div>
      <RouteWithLayout path={ROUTES.LANDINGPAGE} component={LandingPage} subPage={SignInForm} />
      <RouteWithLayout path={ROUTES.REGISTER}    component={LandingPage} subPage={RegisterForm} />
      <RouteWithLayout path={ROUTES.SIGNIN}      component={LandingPage} subPage={SignInForm} />
      <RouteWithLayout path={ROUTES.DASHBOARD}   component={DashboardPage} subPage={Overview} />
      <RouteWithLayout component={LandingPage} subPage={SignInForm} />
    </div>
  </Router>
);

answered May 18, 2020 at 10:30

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sharon Over a year ago

I think that worked, but I have a follow-up question! stackoverflow.com/questions/61868665/…

Collectives™ on Stack Overflow

Using ReactJS, how can I use Route to display different components?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related