Gatsby: Can you create nested routes like in React-router?

[tangert]

E.g. have a shared component on the page and only change what's displayed below?

[KyleAMathews]

Yes, we call them layouts. Try going through the tutorial which walks you through using them https://www.gatsbyjs.org/tutorial/

[mpolinowski]

Hi @KyleAMathews ,
is there an easy way to push those nested routes to different URLs? My case looks something like this:

./pages
chapter1.js
iBelong2Ch1.js
chapter2.js
iBelong2Ch2.js

Following the (awesome, btw) tutorial would lead me to have the following routes:

/chapter1
/iBelong2Ch1
/chapter2
/iBelong2Ch2

But I would need them to be:

/chapter1
/chapter1/iBelong2Ch1
/chapter2
/chapter2/iBelong2Ch2

To clarify - there is a wrapper (layout component) that adds navigation - just as described inside the tutorial. I just need a landing page for each chapter, to be able to link to them and to improve the readability of URLs. E.g.

/Project01/Conclusion
/Project02/Stage01/Conclusion
/Project02/Stage02/Conclusion

[KyleAMathews]

Create a "chapter1" directory and put index.js and iBelong2Ch1.js page components inside.

[mpolinowski]

Just had a chance to test it... Gatsby is amazing. Thank you @KyleAMathews

[arjunmahishi]

But is it possible to have something like /route/<X>
and decide which component to render based on the value of X

[mpartipilo]

@arjunmahishi Yes, it's easy.

If you want to do it manually you can use the Match component: https://reach.tech/router/api/Match

The Route component allows the same, but with a bit more magic: https://reach.tech/router/api/RouteComponent

[arjunmahishi]

If you want to do it manually you can use the Match component: https://reach.tech/router/api/Match
The Route component allows the same, but with a bit more magic: https://reach.tech/router/api/RouteComponent

And this is recommended to use with gatsby?

[mpartipilo]

@arjunmahishi

You need to create a client only route: https://www.gatsbyjs.org/docs/authentication-tutorial/#creating-client-only-routes

Conditional rendering of components is not a concern for gatsby. That's where React and Reach Router come into play.

[alqamabinsadiq]

@KyleAMathews How to do the same thing using createPage API

[njvoulelis]

Plus one to the above ^

[jeffersonnnn]

definitely need a way to do it with the createPage API