I'm wondering if it's possible to use nested routes inside of a Gatsby layout component? I know that the react reach router supports this, but I'm not quite sure how to get it working within Gatsby...
Currently I have a layout component that contains my site header and side navigation menu. Each page loads within the body of the layout correctly.
I'm trying to now create a tabbed interface within one of my MDX pages.
Is it possible to use a nested router, nested layout component, or any other mechanism to avoid reloading the whole body content (including the tabs) when changing pages?
I'm hoping that I can define sub-pages as MDX as well, and reference those as content to load for each of the tabs without reloading my main layout component, or current surrounding page content. Just curious if this is possible or if I should try to pursue a different approach.
Current layout hierarchy
<Root>
/* AppLayout is static around ALL pages and contains header, navigation, and footer */
<AppLayout>
/* PageLayout is the wrapper around each MDX page content (which I want to contain the tabs) */
<PageLayout>
{MDX page content}
</PageLayout>
</AppLayout>
</Root>
Currently, <PageLayout> re-renders when I navigate to other pages (even when using <Link> component), <AppLayout> does not. This does make sense to me because each page is supposed to replace the content of <AppLayout>, but I'm curious if there is a way to either restructure this or use a different mechanism to achieve it.
I'm hoping to have <PageLayout> contain tabs within its content, but not have the rest of the content within that specific page re-render when switching tabs.
As far as I know, it should work no matter if you use Gatsby or a standalone reach-router implementation because Gatsby's routing extends from React reach-routing, adding some enhancements. According to their documentation:
The component is a wrapper around #reach/router’s Link component that
adds useful enhancements specific to Gatsby. All props are passed
through to #reach/router’s Link component.
Gatsby’s <Link> component enables linking to internal pages within a preloading, prefetching resources so that they are fetched by the time the user navigates with this component. We use an IntersectionObserver to fetch a low-priority request when the Link is in the viewport and then use an onMouseOver event to trigger a high-priority request when it is likely that a user will navigate to the requested resource
Related
I am building a website using React.
I am using Router from 'react-router-dom' to navigate between pages (urls).
Everything seems to work ok, but if I navigate between pages the layout style sometimes changes. For instance, the workouts page layout seems good and as I want, however, if I navigate from there to Gallery page and back, it looks different. Same goes for other pages.
I am adding a link to my Github page (the updated code is under 'main' branch). Also, you'll find beneath two pictures that demonstrate the different layout of the Workout page.
My Github repository Link.
Notice that sometimes it doesn't change the style, perhaps you will need to register, login, and logout.
Any Help will be appreciated!!
From peeking at your repo, my first guess would be that the problem is your css classes aren't scoped and are overruling each other when you render different components. When you import a css file like you do, it applies the rules globally, so depending on the order of the components you render, the rules are applied to all components in a different order. What you should do is:
Change your CSS file names to include module , for example Workouts.css should be become Workouts.module.css
Make your CSS imports act like a module, for example import styles from '../css/Workouts.module.css'
Change all your classes in the component to be from styles, for example replace <div className="row"> with <div className={styles.row}>
This way, if you have more than one component with the same class name, the rules of the class apply only to this specific component (i.e. scoped css)
That's my guess
I have a spa that consists of a homepage, categories, about us and contact us.
They all take you to a different component except categories that should take me to a part of the homepage.
Is there a way how to do it with React-router or is there another way
to do it?
It is hard to give feedback without seeing your code.
But if I understood correctly, you want to navigate between the different components using React-Router.
You can import the Router, Switch and Route from React-Router and then in your toplevel-container component, you would create the different for each component, making the URL change based on each component, e.g. /about-us, /contact-us, etc.
If you want your categories to be part of your homepage, then you could create another inside Homepage component, where you want it displayed, if it's only rendered at a specific URL. If you want it displayed at all times, then make the link go to the /homepage URL, same as for the regular homepage component.
I am using react-router-redux and would like to create a new custom NavLink or Link that preloads components for the hovered Link Route upon hover. I would be greatful for some help to point me into the right direction.
I have no idea how to accomplish mounting the component defined in the route without routing to it.
Basicly if I am at the root url of page and hover over a <Link to="/portfolio" /> I want the matched component defined in my routes to prefetch the data needed for this page so that when a user finally clicks the link the data would already be served.
I haven no issues creating a HOC to add eventlisteners to the Link's and then dispatch an action but I need help on how to mount the routes without actually routing to them.
react-loadable sounds like what you want.
https://www.npmjs.com/package/react-loadable
Since React became the hottest thing, I've been using it - but my experience with it has been one in which the dev architect implements the pages in the following way. So, given what I show below, I am curious if people are over using React.
Basically one html page, and insert 'divs' into the page, normal html.. then our "insertion" page has a bunch of renderDOM's to insert your "new component" into a HTML page that is litered with div id's etc.. But there is literally no content that is NOT derived from react components.
Single page app, in which every single ui/view item is a react component. As above, there is no content derived that is not from a react component.
Both of these approaches I've used, the whole page is just a giant react component.. one (#1) has a bunch of divs with ids for renderDOM's, and the other (#2) the whole page and every subsequent page is all react components.
I am curious if this approach degrades and is not scaleable over time because there is literally no rendered HTML outside of our BUILD process... meaning, it is just one giant javascript file.
I could be wrong, but something tells me that the skeleton of the pages should still be HTML, and only those sections of the page that need dynamism should be react components.
Your thoughts? Your implementations?
I have done any isomorphic implementations.
I am new to ReactJs and I am not sure where and how should I define Layout for components. Specifically I want my SideBar Header and Footer remain sticky and using react-router-dom I want to mount rest of the components at appropriate places whenever needed (click on sidebar item)? So should I render multiple components together or there is a another way to first define the layout and then render components at predefined places ?
For dynamic components, use css to lay them out on different pages and render them at once by calling them under render of that main big component. This would make could modular and non-redundant too.
Refer this github , I found it good for referral.
https://github.com/airbnb/react-sketchapp
For the quick layouts you can use bootstrap templates. ( This can help you get started)
https://getbootstrap.com/docs/4.0/examples/