Im building a website using React JS and each time I refresh the page the layout breaks. What could be causing this?This is before refresh
This is after
In the public/index.html call your style.css:
<link rel="stylesheet" href="%PUBLIC_URL%/css/style.css" />
Related
I am new to reactjs. First, I will summarize what happened to me. When I tried to move to another page using useNavigate() in react-router-dom, some click events not fired in that page. But when refresh that page, javascript works well. I want to make react website(just look like medium.com) using metronic static website template. So I added required css and js files in index.html file in public folder like below.
...
<link href="%PUBLIC_URL%/assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css" />
<link href="%PUBLIC_URL%/assets/css/style.bundle.css" rel="stylesheet" type="text/css" />
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
<script src="%PUBLIC_URL%/assets/plugins/global/plugins.bundle.js"></script>
<script src="%PUBLIC_URL%/assets/js/scripts.bundle.js"></script>
<script src="%PUBLIC_URL%/assets/plugins/custom/fullcalendar/fullcalendar.bundle.js"></script>
<script src="%PUBLIC_URL%/assets/js/custom/widgets.js"></script>
<script src="%PUBLIC_URL%/assets/js/custom/apps/chat/chat.js"></script>
<script src="%PUBLIC_URL%/assets/js/custom/modals/create-app.js"></script>
<script src="%PUBLIC_URL%/assets/js/custom/modals/upgrade-plan.js"></script>
And I made a login and dashboard page. After successfully logged in, then page navigates to dashboard page. (I omitted unnecessary codes for simplicity.)
...
import { useNavigate } from "react-router-dom";
...
const Login =() => {
const navigate=UseNavigate();
useEffect(() => {
dispatch(login(credential))
.unwrap()
.then(()=>{
navigate("/dashboard")});
But in dashboard page, original javascript came from Metronic does not work. If I refresh page, then javascript works well. ( dropdown event when click button)
plugins.bundle.js and scripts.bundle.js are responsible for click event handling and they are already included in page.
Maybe my method for using Metronic template in react is incorrect. Please solve this problem. I tried all day long, but could not find solution. Thanks in advance.
Finally I solved this problem. For those who would confront this problem, I will explain the root cause and solution!
All Metronic bootstrap menu components are initialized automatically, but sometimes like me should initialize instances. In my problem, I could not fire dropdown menu event because when navigating to dashboard(re-rendering), not initialized automatically.
So, in useEffect hook, just initialize KTMenu like below.
KTMenu.createInstances();
For those similar cases, check this manual metronic documentation how to initialize instances, then add initialization code in useEffect hook.
I have a reactjs app that I want to be hosted at:
https://localhost/testpp/
https://dev.mysite.com/testapp/
https://prod.mysite.com/testapp/
When I use react-scripts build to do the production build, the index.html that is generated in the build folder has links inserted like this:
<link href="/static/css/2.7118e3f5.chunk.css" rel="stylesheet">
<link href="/static/css/main.efda1f21.chunk.css" rel="stylesheet">
<script src="/static/js/2.a33cce7b.chunk.js"></script>
<script src="/static/js/main.0d57a210.chunk.js"></script>
when the browser tries to download /static/css/2.7118e3f5.chunk.css it fails because it should be trying to get it from testapp/static/css/2.7118e3f5.chunk.css
I've then tried adding "homepage": "/testapp" to package.json, which now generates the correct links e.g.:
<script src="testapp/static/js/main.0d57a210.chunk.js"></script>
But now when I navigate to https://dev.mysite.com/testapp/static/js/main.0d57a210.chunk.js the response is always the index.html page, rather than the js file.
What am I doing wrong here?
You could also achieve expected outcome by creating a route in App.js and redirect user to the testapp route.
In App.js
return (
// ... your routes logic
<Redirect from="/" to="testapp" />
)
I created a new project using the React-Redux SPA template for Visual Studio 2017
Now the "react-app" div is added in Index.cshtml.
what if I want to reuse the same <div> again inside another app(simp HTML page) and reuse related scripts.
here is what on a test.html page
scripts
<base href="" />
<link rel="stylesheet" href="dist/vendor.css" asp-append-version="true" />
<link rel="stylesheet" href="dist/site.css" asp-append-version="true" />
<script type="text/javascript" src="dist/vendor.js" asp-append-version="true"></script>
<script type="text/javascript" src="dist/main-client.js" asp-append-version="true"></script>
body
<div id="react-app" asp-prerender-module="ClientApp/dist/main-server" data-content="{"formID":7}">Loading...</div>
running this page in browser says that initialReduxState is undefined.
so what is the best practice to easily embed React component and its related scripts into another page without requiring MVC Razor views?
Thanks!
it turns out that the server side prerendering is initiating the initialReduxState, and in this case (simple HTML page), server side prerendering is not working and all Tag Helpers like asp-prerender-module are useless and should be removed.
so to get the main-client.js file work, I modified boot-client.ts file
from
const initialState = (window as any).initialReduxState as ApplicationState;
to
const initialState = (window as any).initialReduxState as ApplicationState || { form: {}, routing: { location: null }};
Can anyone help me here? im (totally) new at polymer. And im having trouble with rendering the content.
One page named "o-primeiro-demo.html" isnt rendering. I can only get the content present in the index.html file when i get it either through localhost:8080 or localhost/php.
This is the code:
index.html(what i added. the rest is the inicial settings)
<link rel="import" href="components/polymer/polymer.html">
<link rel="import" href="o-primeiro-demo.html">
<body>where is "o-primeiro-demo.html" data?</body>
o-primeiro-demo.html
<link rel="import" href="https://polygit.org/components/polymer/polymer.html">
<link rel="import" href="https://polygit.org/components/iron-icon/iron-icon.html">
<dom-module id="o-primeiro-demo">
<template>This is the first test</template>
<script>Polymer ({ is : "o-primeiro-demo" }); </script>
</dom-module>
bower.json
"name": "o-primeiro-demo",
If I understand correctly, you are trying to show o-primeiro-demo in your page.
For Polymer, to show a page you have to stamp it out onto the page with a tag.
If you want that to show up you need to write:
<body>
<o-premeiro-demo></o-premeiro-demo>
</body>
Until you do this, all content is inert. It doesn't exist and nothing knows about it.
I have been working on boostrap react for 3 hours. I have tried to find questions and answers to my problem. bsStyle of Bootstrap React doesn't work at all, so i wonder it why? I have seen so many examples, and they just import like what i have done too.
import {Button} from 'react-bootstrap';
but i still get a simple button without any styles
here my component
export class bsButton extends React.Component{
render () {
return (
<div>
<Button bsStyle="primary">primary button</Button>
</div>
);
}
}
what is wrong with my import or my component code?
your help is appreciated :D
You need to make sure you have added the bootstrap CSS in the head of your page.
Getting Started This can be easily forgotten when adding the library through NPM
Include
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
in public/index.html
<head>
.
.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
.
.
</head>
source: here