Home page not showing properly in Reactjs - javascript

I am working with Nextjs framework,I am integrating/convert html to "nextjs",Whenever i click on "About" or any other page then come
back to "Home" page then design not working/loading properly,I worked on this issue and realized "This is because of js file(custom.js not included whenever back to home)"
how can i solve this ? Here is my _document.js code
import Document, { Html, Head, Main, NextScript } from "next/document";
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx);
return { ...initialProps };
}
render() {
return (
<Html>
<Head>
<link
rel="shortcut icon"
href="images/favicon.ico"
type="image/x-icon"
/>
<link rel="apple-touch-icon" href="/images/apple-touch-icon.png" />
<link rel="stylesheet" href="/css/bootstrap.min.css" />
<link rel="stylesheet" href="/css/style.css" />
<link rel="stylesheet" href="/css/responsive.css" />
<link rel="stylesheet" href="/css/custom.css" />
</Head>
<body>
<Main />
<NextScript />
<script src="/js/jquery-3.2.1.min.js"></script>
<script src="/js/popper.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/jquery.superslides.min.js"></script>
<script src="/js/bootstrap-select.js"></script>
<script src="/js/inewsticker.js"></script>
<script src="/js/bootsnav.js."></script>
<script src="/js/images-loded.min.js"></script>
<script src="/js/isotope.min.js"></script>
<script src="/js/owl.carousel.min.js"></script>
<script src="/js/baguetteBox.min.js"></script>
<script src="/js/form-validator.min.js"></script>
<script src="/js/contact-form-script.js"></script>
<script src="/js/custom.js"></script>
</body>
</Html>
);
}
}
export default MyDocument;
Here is my _app.js code
import "../styles/globals.css";
import Layout from "../components/Layout/Layout";
import { Provider } from "react-redux";
import { store } from "../store";
function MyApp({ Component, pageProps }) {
return (
<Provider store={store}>
<Layout>
<Component {...pageProps} />
</Layout>
</Provider>
);
}
export default MyApp;

Related

why my react code not working although other stuff is okay

decided to make react project for the first time, noticed that it's not working, css is good, but not react code, checked a lot tutorials but haven't found any solution:(
P.s this is my first time using react,therefore sorry guys and thanks for feedback
index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script crossorigin src="https://unpkg.com/react#18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
</head>
<body>
<div id="restaurant"></div>
<script src="js.js" type="text/babel"></script>
</body>
</html>
js.js:
import React from "react"
import ReactDOM from "react-dom"
import App from "./App"
ReactDOM.render(<App />, document.getElementById("restaurant"))
ReactDOM.render(<h1>hiii</h1>, document.getElementById("restaurant"))
App.js:
import React from "react"
import Header from 'header'
export default function App() {
return(
<Header />
)
}
Header.js :
import React from 'react'
export default function Header(){
return (
<div className='container'>
<div className='head-part'>
<h1>HopeLake</h1>
<div className='icons'>
<span>i1</span>
<span>i2</span>
<span>i3</span>
</div>
<div className='list-pages'>
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>MENU</li>
<li>ORDER</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</div>
)
}
Here is my example to use React.JS by CDN.
No need to export default but need to import file in index.html
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
</head>
<body>
<div id="root"></div>
<script crossorigin src="https://unpkg.com/react#18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<!-- Import new component before use here!!! -->
<script type="text/babel" src="./App.js"></script>
<script type="text/babel" src="./Header.js"></script>
<script type="text/babel" src="./index.js"></script>
</body>
</html>
App.js
const App = () => {
return <Header/>
}
Header.js
const Header = () => {
return <div>This is my header</div>
}
index.js
const container = document.querySelector("#root");
const root = ReactDOM.createRoot(container);
root.render(<App />);
Hope this will help you...

dynamic routes file not including css after reload page using Reactjs

I am working on Reactjs an using Nexts, Whenever i click on "dynamic routes" ([slug.js]) page then its working properly but whenever we refresh that page then css not including (design issues),How can i fix this,Here is my "document.js" code
import { Html, Head, Main, NextScript } from 'next/document'
import Script from 'next/script'
export default function Document() {
return (
<Html>
<Head>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossOrigin="anonymous"
/>
<link rel="stylesheet" type="text/css" href="css/responsive.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link
href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght#400;500;600;700&family=Darker+Grotesque:wght#300;400&family=Poppins:wght#100;300;400;500;700&display=swap"
rel="stylesheet"
/>
<Script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
Here is my "_app.js" file
import "../styles/globals.css";
import "../public/Js/main.js";
import "aos/dist/aos.css";
import { useEffect } from "react";
import AOS from "aos";
import "../public/css/style.css";
import "../public/css/custom-audioplayer.css";
function MyApp({ Component, pageProps }) {
useEffect(() => {
AOS.init({
disable: function () {
var maxWidth = 800;
return window.innerWidth < maxWidth;
},
});
}, []);
return <Component {...pageProps} /> ;
}
export default MyApp;

Page not displaying properly in Reactjs

I am working with Reactjs and using nextjs framework,I am integrating/converting "index.html" to "index.js" page
Whenever i go to "About" page then "About" page is displaying fine but whenever i click again on "Home" page
then page is not showing,only loader is displaying untill i refresh page,Where i am wrong ?
Here is my _document.js
import { Html, Head, Main, NextScript } from 'next/document'
import Script from 'next/script'
export default function Document() {
return (
<Html>
<Head>
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/fontawesome.css" />
<link rel="stylesheet" type="text/css" href="css/templatemo-stand-blog.css" />
<link rel="stylesheet" type="text/css" href="css/owl.css" />
</Head>
<body>
<Main />
<NextScript />
<Script src="../vendor/jquery/jquery.min.js" strategy="beforeInteractive"></Script>
<Script src="../vendor/bootstrap/js/bootstrap.bundle.min.js" strategy="lazyOnload" ></Script>
<Script src="../js/custom.js" strategy="lazyOnload"></Script>
<Script src="../js/owl.js" strategy="afterInteractive"></Script>
<Script src="../js/slick.js" strategy="lazyOnload" ></Script>
<Script src="../js/isotope.js" strategy="lazyOnload" ></Script>
<Script src="../js/accordions.js" strategy="lazyOnload" ></Script>
</body>
</Html>
)
}
Here is my _app.js file
import Script from 'next/script'
import '../styles/globals.css'
import '../public/vendor/bootstrap/css/bootstrap.min.css'
import '../public/css/fontawesome.css'
import '../public/css/templatemo-stand-blog.css'
import '../public/css/owl.css'
import jQuery from 'jquery';
import {useEffect} from "react";
import Header from '../components/Layout/Header'
import Footer from '../components/Layout/Footer'
function MyApp({ Component, pageProps }) {
return <><Header /><Component {
...pageProps} /><Footer /></>
}
export default MyApp

How to render <scipt> tags in React JS?

I am trying to render <script> tags but unable to do so. Although javascipt is already enabled for the browser. Screenshot of the error message on browser console.
Code snippet.
import './App.css';
import React from "react";
import {Helmet} from "react-helmet";
class App extends React.Component {
render () {
return (
<div className="application">
<h1>My name is </h1>
<script src="https://XXXXX.com/XX.js" id="XXX-embedded-form" primary-color="" secondary-color="" margin-x="" data-uuid="ffwesfwef" ></script>
<Helmet>
<script src="https://XXXXX.com/XX.js" id="XXX-embedded-form" primary-color="" secondary-color="" margin-x="" data-uuid="wefewfwefwe" ></script>
<meta charSet="utf-8" />
<title>My Title</title>
<link rel="canonical" href="http://myurl.net/example" />
</Helmet>
</div>
);
}
};
export default App;

why is my index.html file returning a blank screen whenever i debug or preview it?

this is the app.js file
import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import DashboardLayout from './layouts/DashboardLayout';
import './faithdash/scss/styles.scss';
export default function App() {
return (
<BrowserRouter>
<Switch>
<Route component={DashboardLayout} />
</Switch>
</BrowserRouter>
);
}
this is the index.html file
ive tried everything and have used different my vscode index chrome previewer to view the index file like others but its shows a blank screen
<!DOCTYPE html>
<html lang="en">
<head>
<title> Faithpays dashboard</title>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.png" />
<link
href="https://%PUBLIC_URL%/evergreen.eot"
rel="font"
/>
<link
href="https://%PUBLIC_URL%/evergreen.css"
rel="stylesheet"
crossorigin="anonymous" />
</head>
<body>
<div id="app"></div>
<script src="app.js"></script>
<script src="_nav.js"></script>
</body>
</html>
Because you didn't call render function from ReactDOM.
See more here: https://reactjs.org/docs/getting-started.html

Categories