Question 286647 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How to achieve the same results when using outlet in react router with Next js app router?

I have a dashboard for example and I have two categories in there. sales and clients for example. and when I click sales it should render the sales page within the dashboard layout so, the idea is not to go to another page. same for clients the page should display within the dashboard not to navigate to different page

I tried learning about parallel and Intercepting Routes but they seem so confusing and I don’t understand what they do.

Tags:

2

Answers


  1. 0

    If you’d like to make some components layout(not rerendering when route is changed), you can use Next layout feature.

    Check

    https://nextjs.org/docs/app/building-your-application/routing

    or

    https://nextjs.org/docs/pages/building-your-application/routing/pages-and-layouts

    if you use pages-router.

    Next.js has its own file-system-based routing system that inherently handles nested routes differently so that you don’t need to use ‘Outlet’ from react-router-dom.

    Login or Signup to reply.
  2. 0

    It is much easier than you think!

    Parallel Routes in Next.js refer to the ability to define multiple routes that match a given URL. These routes are processed in parallel, and multiple pages/components can be rendered for the same URL.
    You can define it like this:

    pages/[slug].js

    You can use Parallel Routes for the structure of the application.

    Intercepting Routes are more about the logic executed before rendering a page, often involving server-side operations or checks.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search