https://williamgrube1.github.io/Library/
App.jsx code
When react app is opened only the header and footer show until you click on a link. How is this fixed?
Related
I have a component modal and when click inside menu of my app to open this modal.
I think i will use IPC of electron but can't use IPCRender in React component and can not listen event when click menu. Please help me.
Navbar.js code
MenuItems.js
App.js
Index.js
the nav bar is not reflecting on the localhost page..
#Issue_Solved
Solution:
Inside package.json file update-
"homepage": "."
to
"homepage": "https://www.exapmle.com/",
Problem
Every thing is working fine on locally but on production server/ hosting serve when I go landing page to another page the Navbar brand image not found.
image on landing page: https://dazzling-yonath-5559e4.netlify.app/static/media/sundarbanX-logo.12b02027.png
image on profile page: https://dazzling-yonath-5559e4.netlify.app/profile/static/media/sundarbanX-logo.12b02027.png
And import image on Navbar component is:
import LOGO from '../images/sundarbanX-logo.png';
<img onClick={()=>history.push('/')}
style={{cursor:'pointer',marginRight: 160 }}
src={LOGO} alt="logo" className={classes.logo} />
Thanks in advance
Use require instead of import for importing images.
const Logo = require('../images/sundarbanX-logo.png');
I am developing a responsive web app using React and try to use iframe to display PDF.
However, I found that only one page can display in iframe under IOS Safari.
I have read this stackoverflow but this is not work in PDF.
IFrame height issues on iOS (mobile safari)
import React, { Component } from 'react';
import './App.css';
class App extends Component {
state = {
base64Pdf:"XXXXXX"
}
render() {
return (
<div>
<iframe
src = {this.state.base64Pdf}
/>
</div>
);
}
}
export default App;
I would like to ask the solution to display all PDF pages in iframe under IOS Safari.
May I have any advise?
I am trying to implement a login page in admin on rest with a link to a registration form. I am quite a newbie in react and frontend development in general.
I duplicated the login page from the admin on rest demo, but I can't figure out how to add the link in the bottom. I tried adding a component from react-router but I keep getting all sorts of errors. Is there any example I can follow?
EDIT: I am trying to add a registration page with a custom route but the page is displayed inside the admin UI. This is what it looks like:
admin-on-rest is a frontend framework but it's also a bunch of components you can use/integrate in your own app.
It's important to understand how react is working to work with admin-on-rest.
Afaik you have to know about redux, redux-form, react-router and redux-saga.
There is a short description how to add a login page and
how to customize the login page.
But this is not an example.
Here is the source code of the login page. If you really want to duplicate the page you can add a link to the registration page in the render method.
First create a file called
login.js
and duplicate the original login page. Import the Link-Component:
import { Link } from 'react-router-dom';
Afterwards use the Link somewhere, for example between </form> and </Card> (between line 106 and 107).
<Link to={{pathname: "/register"}} >Registration</Link>
In your
app.js
import your created login page:
import Login from './login';
and use it:
<Admin loginPage={Login} authClient={authClient} restClient={jsonServerRestClient('http://jsonplaceholder.typicode.com')}>
EDIT:
Now you have a "Registration"-Link in your Login page.
Now, it's time to create the registration page. I am not a admin-on-rest expert, but I think the idea of admin-on-rest is to show always the menu and check the authorization. I think the most of the admin app's will not have a registration page, which must be visible for users which have not logged in and they should not see the menu on the left side. It's similar to a login page. So you have to create custom route to a custom page (without a authorization check) with a custom layout.
Create a new file called
MyLayout.js
with the content of
Layout.js
and remove the lines
injectTapEventPlugin()
and
<Sidebar>
{menu}
</Sidebar>
to hide the menu on the left side.
Then create a file called
customRoutes.js
with the following content:
import React from 'react';
import { Route } from 'react-router-dom';
import Register from './Register';
export default [
<Route exact path="/register" component={Register} />
];
and a file called
Register.js
with
import React from 'react';
import { Card, CardText } from 'material-ui/Card';
import { ViewTitle } from 'admin-on-rest';
const Register = () => (
<Card>
<ViewTitle title="Register" />
<CardText>
<div>This is the register page.</div>
</CardText>
</Card>
);
export default Register;
In your
app.js:
import MyLayout from './MyLayout';
import customRoutes from './customRoutes';
import MyLayout from './MyLayout';
import authClient from './authClient';
<Admin appLayout={MyLayout} loginPage={Login} authClient={authClient} customRoutes={customRoutes} restClient={myApiRestClient}>
This is just an (ugly) example.
Hope this helps. :)