Navbar.js code
MenuItems.js
App.js
Index.js
the nav bar is not reflecting on the localhost page..
Related
I am running into a strange problem with the Link component from react-router-dom. I am trying to create a link with Anchor, but as soon as I put the tag in the page shows nothing - just blank. When I remove the tag, the page shows correctly with the content again.
I have imported Link from react-router-dom version 6.3.0. And this code is from a laravel installation.
My code -
import { Link } from "react-router-dom"
export default function App() {
return <>
<div>
<h1>The main app!</h1>
<Link to="/">Test</Link>
</div>
</>
}
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?
#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 trying to build a site using react.js and I was able to render the picture but I am not able to view the picture. I need some help. I am creating a website for a client. I am trying to render the image from Header.jsx. The picture is saved in public/Images/Img1.jpg. I have a component folder which as App.jsx, CreateArea.jsx, Header.jsx, Footer.jsx and Navbar.jsx.
[Error with pic
import React from "react";
import NavbarHeader from "./Navbar";
function Header() {
return (
<header>
<NavbarHeader
/>
<h1>SyncTech Solutions- Take your business beyond the four walls. </h1>
<img src = "/Images/Img1.jpg"></img>
</header>
);
}
export default Header;
]1
You need to use
<img src={`${process.env.PUBLIC_URL}/Images/Img1.jpg`} />
for using images from public folder.
process.env.PUBLIC_URL will store your public url... The one which you access with %PUBLIC_URL% in the index.html file.
You could use require or import syntax if your image was inside src folder since it would be processed by webpack then.
But process.env.PUBLIC_URL seems to be the correct option in your case.
Replace your <img> tag with
<Image source={require('./Images/Img1.jpg')} />
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. :)