NextJS router solution for react-router Switch statement? - react-router

Question

For those using NextJS, how do you achieve the same behavior for react-router Switch behavior.
ie...
react-router
BASE PAGE
--- header
-------some sub content
-------<SWITCH>
<Route .. for component 1 />
<Route .. for component 2 />
<Route .. for component 3 />
How is this achieved via NextJS?

Answer 1

If your aim is to persist a layout across the whole app you could use next js custom _app.js to achieve that. As Next js is file-based routing, creating pages inside pages/ will do the rest

Answer 2

As its documentation says
Next.js has a file-system based router built on the concept of pages.
When a file is added to the pages directory it's automatically available as a route.
The files inside the pages directory can be used to define most common patterns.
index-routes

Answer 3

I am also looking for a solution to use React's Switch component. But until I do, this is how I handle conditional switching:
export default function Page({ page, pageType }) {
// ...
//
switch (pageType) {
case 1:
return (
<Layout>
{beards.map((beard) => (
<BeardedDeveloper {...beard} key={beard.id} />
))}
</Layout>
);
case 2:
return (
<Layout>
<BeardedDeveloperDetail {...beard} key={beard.id} />
</Layout>
);
}
}
// for my use-case, `pageType` is defined in my `getStaticProps`
//
export async function getStaticProps({ params }) {
// ...
//
return {
props: {
page: page,
pageType: pageType
}
};
}
It's an int; but, it can easily be changed to enum, string, or any defined type.

Answer 4

You can achieve your desired result by following these simple steps:
You have to put your route components in the pages folder like
it's shown here
In Next.js, a page is a React Component exported from a file in the pages directory.
Pages are associated with a route based on their filename. For example, in development:
pages/index.js is associated with the / route.
pages/posts/first-post.js is associated with the /posts/first-post route.
You have to add a Layout component so you can add general components like header to every route and wrap your pages with the layout component like it's shown here in Nextjs tutorial.
src/components/HOC/layout.js
export default function Layout({ children }) {
return (
<React.Fragment>
<header>...</header>
{children}
</React.Fragment>
);
}
pages/profile.js
import Layout from "../src/components/HOC/layout.js";
const Profile = (props) => (
<Layout>
<div>User's profile</div>
</Layout>
);
export default Profile;
You can also add props like title to the layout component so you can change it for every specific route/page like below:
src/components/HOC/layout.js
export default function layout(Component, title) {
return (props) => (
<React.Fragment>
<header>{title}</header>
<Component {...props} />
</React.Fragment>
);
}
pages/profile.js
import layout from '../src/components/HOC/layout.js'
const Profile = (userName) => <div>Profile of {userName}</div>;
export default layout(Profile,"Your Profile Page");