dynamic routes file not including css after reload page using Reactjs - javascript

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;

Related

Unable to use font css file in Reactjs

I am working with Reactjs(Nextjs),Whenever i am trying to use "css" in project then i am getting following error in my screen
Module not found: Can't resolve '../fonts/fontawesome-webfont.eot?v=4.7.0'
How can i solve this ?
Here is my code in _app.js
import Head from "next/head";
import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import 'swiper/swiper.min.css'
import '../styles/globals.css'
import '../styles/css/style.css'
<link rel="stylesheet" href="../styles/css/bootstrap.min.css" />
<link rel="stylesheet" href="../styles/css/style.css" />
<link rel="stylesheet" href="../styles/css/jquery.mCustomScrollbar.min.css" />
The lines with :
<link rel="stylesheet" href="../styles/css/bootstrap.min.css" />
<link rel="stylesheet" href="../styles/css/style.css" />
<link rel="stylesheet" href="../styles/css/jquery.mCustomScrollbar.min.css" />
should be inserted in index.html. And you should use css from cdn
ex:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

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

Home page not showing properly in Reactjs

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;

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

Uncaught ReferenceError: Vuetify is not defined

I install vuetify using npm install vuetify and after then I added npm install sass sass-loader deepmerge -D Then I use php artisan serve and there is nothing in the site and in the console there is an error Uncaught ReferenceError: Vuetify is not defined.Also I add vue add vuetify and the plugin file was created and dependencies was added.nothing happens.Please help me to fix this issue.
mainapp.vue
<template>
<v-app >
<Navbar />
<v-main>
<router-view/>
</v-main>
<Footer />
</v-app>
</template>
<script>
//import HelloWorld from './HelloWorld'
import Navbar from './pages/navbar'
import Footer from './pages/footer'
export default {
components: { Navbar,Footer },
name: 'App',
// components: {
// HelloWorld
// },
data () {
return {
//
}
}
}
</script>
app.js
require('./bootstrap');
window.Vue=require('vue');
import router from './router';
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify);
Vue.component('mainapp',require('./components/mainapp.vue').default);
const app=new Vue(
{
el: '#app',
vuetify: new Vuetify(),
router,
}
)
welcome.blade.php
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<title>Fullstack Blog</title>
<link rel="stylesheet" href="/css/all.css">
<!-- to show icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/3.8.95/css/materialdesignicons.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#mdi/font#latest/css/materialdesignicons.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="app">
<mainapp></mainapp>
</div>
</body>
<script src="{{mix('/js/app.js')}}"></script>
</html>

Categories