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
Related
enter image description hereI am using React, Typescript and Styled components. Everything looks fine but I am seeing multiple styles tag under my head tag. I would like to know why it is creating multiple styles tag and is there any way to combine all styletags into one.
For example , I am creating a dropdown in a loop and it has 3 values and it generates 3 style tag under my head tag
Thanks all
From what I understand, I believe this is expected behavior assuming you're utilizing style partials for each component. React (and other front end frameworks like Angular) is importing the styles that apply to the current view. It does this by importing them individually as the page renders different views.
This isn't always ideal, though. I often create CSS partials in a global styles folder if I want to share styles across components. The only styles I put in the component specific CSS file are styles that are 100% specific to that component and I don't ever want to share.
You could also always create a shared CSS file that you import once - ie - dropdown.css (or .scss etc if you're using a pre-processor) and delete the react component specific CSS files that you will be replacing with this new global version. The downside being that whatever CSS you have in there will always be imported even if the dropdown isn't being rendered or viewed.
I have a next.js app set up and written entirely in react, currently including the homepage, which is just a temporary placeholder using react components.
The real homepage was delivered to me in the form of a static site with an HTML file and several CSS+JS files. I can't just display the static HTML files right out of the public directory because I need the 'real' React navigation component to be displayed. I converted the HTML files to .js files, chopped off their static nav, and wrapped them in an export default so that I could import them into the appropriate route file in /pages, displaying them using return <div dangerouslySetInnerHTML={{ __html: homepage }} />; which allows my _app.tsx file to wrap it in all the usual stuff that applies the nav to the pages, context, providers, etc etc.
This seems to work great, however when I navigate away to one of my real pages and navigate back to the homepage it doesn't seem to re-run the javascript files the way a regular webpage would. Animations don't start, hero slider images are displayed one under the other, basically as if none of the JS is happening.
Am I approaching this from entirely the wrong angle, or is there just something I'm missing? I would prefer not to convert the HTML file I was given into React components at this time, so priority would be given to whatever solution keeps the original HTML file in its closest form so that the original programmers can update it without hassle. Why is none of my JS re-running?
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
I have set up a simple react project that has a reusable component called 'cover'. Within the 'cover' component, I have an animated SVG I created from Adobe Animate and have it exported into HTML, JS and SVG. This works fine on first load as the JS is in the public/index.html file and initialised in the tag. However, when I change routes, the init isn't retriggered (which is correct since React isn't meant to reload the page), so now I have the dilemma of not being able to see the SVG upon route changes.
See example here: https://react-sfj7qx.stackblitz.io
Editor version: https://stackblitz.com/edit/react-sfj7qx
Note that the init() function on the tag doesn't seem to render within Stackblitz...
Since I don't know Adobe Animation too much, I edited your stackblitz, I break your code a little bit, but you have all it needs to succeed in this code. What you was not aware of, is that you need to import and export function and variable between files in react. So you'll see how I've done it in the stackblitz example.
Good luck!
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/