How can I render multiple components from a single route change?

Question

I am used to working with React Router which offers great flexibility for rendering multiple components from a single route at different places on a page without reloading the entire page. I've included an example below. I would like to use Next.js in future projects but I cant find a way to reproduce this app-like router functionality as Next.js only appears to offer page based routing with no control over the re-render of individual components on a page in response to a route change. This seems to make it good for web pages but not for complex apps that may require multiple changes in response to a single route change.

In the following example I am using React Router in a CRA to render multiple components concurrently on the page based my link configuration. According to my current understanding this appears impossible to reproduce using Next.js.

https://codesandbox.io/s/react-router-component-routes-rcen4

code here:

const BasicExample = () => (
  <Router>
    <div>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/about/me">About Me</Link>
        </li>
        <li>
          <Link to="/about/you">About You</Link>
        </li>
        <li>
          <Link to="/topics">Topics</Link>
        </li>
      </ul>

      <hr />

      <Route exact path="/" component={Home} />
      <Route path="/topics" component={Topics} />
      <Route path="/about" component={About} />
      <Route path="/about/me" component={AboutMe} />
      <Route path="/about/you" component={AboutYou} />

    </div>
  </Router>
);

Is there a way to efficiently achieve this and render only the components I need in response to a route using Next.js?

David Barker David Barker · Accepted Answer · 2021-02-18T15:59:40

NextJS has its own router next/router that provides SPA functionality, the difference being that the pages are based on file structure not a configuration component.

You'd do well to read the Migrating from React Router documentation that the Next JS team put together.

The concepts are different from react router as there are fundamental differences in how the different routers work, but there is nothing that the next router can't do that the react router can**.

To work with this consider an applications main page. It contains 5 components placed in a layout. With next you would render the same layout for each separate state as a single page. Don't work with separate pages or you will always see a refresh (see ** for reasoning). Each inner component would be using the next router hooks to work out what the history state is. React will only re-render components who's props have changed just as it does with react-router-dom.

** Next.js can't change a routes path without a refresh. With next you need to switch to query parameters with shallow routing to control the state of the page you are working with. Some people don't like this and prefer the pretty urls but ultimately it achieves the same goal.

Demo to show your code in a next environment

How can I render multiple components from a single route change?

2 Answers