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
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...
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;
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
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;
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