This is exactly the code I copied in the video tutorial but I don't know why I got a blank white screen on my browser while the other (original) code doesn't get a blank screen after importing the { Link } from "react-router-dom"; How do you fix this? I can't find any solutions.
Here is my App.js
import React from "react";
import Navbar from "./components/Nav/Navbar";
function App () {
return (
<div>
<Navbar/>
</div>
);
}
export default App;
This is my Navbar.jsx
import React from "react";
import { Link } from "react-router-dom";
import Logo from "../../assets/Logo.png";
const Navbar = () => {
return (
<nav className="bg-white">
<div className="flex items-center font-medium justify-around">
<div>
<img src={Logo} alt="logo" className="md:cursor-pointer" />
</div>
<ul>
<li>
<Link to="/" className="py-7 px-3 inline-block">
Home
</Link>
</li>
</ul>
</div>
</nav>
);
};
export default Navbar;
Related
I am trying to authenticate my react app using keycloak. The app is not able to successfully logout. I have setup the admin console to contain the post logout redirect url to be http://localhost:7171. The URL that shows on clicking logout button
http://localhost:8080/realms/hype/protocol/openid-connect/logout?client_id=hypeclient&post_logout_redirect_uri=http%3A%2F%2Flocalhost%3A7171%2F&id_token_hint=eyJhbGciOiJSUzI1NiIsInR5cCIgOiAiSldUIiwia2lkIiA6ICJZRHVhc0pTT0dIOUh2ZnRvZGNhRktmRkxuOEZuWmkzSVN3eVBQenlzazFVIn0.eyJleHAiOjE2NzU1NjU1ODUsImlhdCI6MTY3NTU2NTI4NSwiYXV0aF90aW1lIjoxNjc1NTY1MjcyLCJqdGkiOiI1MjEyODZlZS1hNThiLTRhMTUtYTgyZS1jODU2ZmE4NWVkZTEiLCJpc3MiOiJodHRwOi8vbG9jYWxob3N0OjgwODAvcmVhbG1zL2h5cGUiLCJhdWQiOiJoeXBlY2xpZW50Iiwic3ViIjoiYzJhZTJiZWYtMjg2ZC00MDgzLTk3YTktMWEyM2YxNzQ4YzE0IiwidHlwIjoiSUQiLCJhenAiOiJoeXBlY2xpZW50Iiwibm9uY2UiOiI3NGUyMTk3Ni0zNzcwLTQzNWEtOTEzMC1lNGU2YWUyY2I4ZTIiLCJzZXNzaW9uX3N0YXRlIjoiYzAxZWJlYTEtMjAwYS00YzU3LTg2NTgtNjYyYTdjOTA5OThkIiwiYXRfaGFzaCI6IjNPczlxc0NucFdmYnFuRkNlZ1docmciLCJhY3IiOiIwIiwic2lkIjoiYzAxZWJlYTEtMjAwYS00YzU3LTg2NTgtNjYyYTdjOTA5OThkIiwiZW1haWxfdmVyaWZpZWQiOmZhbHNlLCJuYW1lIjoia2FyYW4gc2hhaCIsInByZWZlcnJlZF91c2VybmFtZSI6ImthcmFuIiwiZ2l2ZW5fbmFtZSI6ImthcmFuIiwiZmFtaWx5X25hbWUiOiJzaGFoIn0.TFCh-dPE4h8HKpAapNv4socR7uAsKDnuVpqLiaZCguu1Vyztn_sUkrbaqFKJDeoIZv3XDzBDM5MezMvyRRkmiRIQTIbiTlYGgcNA5UkcwbeKioaowCWqYqyjG7A3D0lKNjf0MAF6PmWVrPJVbm8hYtQMVDHwWQ2vFTShnmMRJ2iTf4IeT1DDLANrLh3tMXeYMF2f9ZmvtNS72O-BICkD4uXPSyMiqnDgj_52UAdkEaLgkuv31TAYDAeVef-Rly8n7K5LG1MWytB2_-WrhwXwfxjymc9RH55Iy-1tvLUFceigO7XwQzffZYK5uJ9PXkbg3hlkr6QLVSXsiu8RYKQu9w
My Setup including the version looks like
Keycloak 20.0.3
Keycloak.js 20.0.3 via npm
react 18.2
App.JS
import React from "react";
import { ReactKeycloakProvider } from "#react-keycloak/web";
import keycloak from "./Keycloak";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Nav from "./components/Nav";
import WelcomePage from "./pages/Homepage";
import SecuredPage from "./pages/Securedpage";
import PrivateRoute from "./helpers/PrivateRoute";
function App() {
return (
<div>
<ReactKeycloakProvider authClient={keycloak}>
<Nav />
<BrowserRouter>
<Routes>
<Route exact path="/" element={<WelcomePage />} />
<Route path="/secured"
element={<PrivateRoute>
<SecuredPage />
</PrivateRoute>}/>
</Routes>
</BrowserRouter>
</ReactKeycloakProvider>
</div>
);
}
export default App;
Nav.JS
import React from "react";
import { useKeycloak } from "#react-keycloak/web";
const Nav = () => {
const { keycloak, initialized } = useKeycloak();
function loginHelper(){
console.log("login clicked");
keycloak.login();
};
function logoutHelper(){
console.log("login clicked");
keycloak.logout();
};
return (
<div>
<div className="top-0 w-full flex flex-wrap">
<section className="x-auto">
<nav className="flex justify-between bg-gray-200 text-blue-800 w-screen">
<div className="px-5 xl:px-12 py-6 flex w-full items-center">
<h1 className="text-3xl font-bold font-heading">
Keycloak React AUTH.
</h1>
<ul className="hidden md:flex px-4 mx-auto font-semibold font-heading space-x-12">
<li>
<a className="hover:text-blue-800" href="/">
Home
</a>
</li>
<li>
<a className="hover:text-blue-800" href="/secured">
Secured Page
</a>
</li>
</ul>
<div className="hidden xl:flex items-center space-x-5">
<div className="hover:text-gray-200">
{!keycloak.authenticated && (
<button
type="button"
className="text-blue-800"
onClick={() => loginHelper()}
>
Login
</button>
)}
{!!keycloak.authenticated && (
<button
type="button"
className="text-blue-800"
onClick={() => logoutHelper()}
>
Logout ({keycloak.tokenParsed.preferred_username})
</button>
)}
</div>
</div>
</div>
</nav>
</section>
</div>
</div>
);
};
export default Nav;
Keycloak.JS
import Keycloak from "keycloak-js";
const keycloak = new Keycloak({
url: "http://localhost:8080",
realm: "hype",
clientId: "hypeclient",
});
export default keycloak;
PrivateRoute.JS
import { useKeycloak } from "#react-keycloak/web";
const PrivateRoute = ({ children }) => {
const { keycloak } = useKeycloak();
const isLoggedIn = keycloak.authenticated;
console.log("checking auth access " + isLoggedIn);
return isLoggedIn ? children : null;
};
export default PrivateRoute;
I have tried following this link but it does not work. Admin console looks like
Try changing
valid post logout urls to +
valid redirect urls to http://localhost:7171*
import React from 'react';
import { RiMenu3Line, RiCloseline } from 'react-icons/ri';
import logo from '../../assets/logo.svg';
import './navbar.css';
function Navbar() {
return (
<div className="gpt3__navbar">
<div className="gpt3__navbar-links">
<div className="gpt3__navbar-links_logo">
<img src={logo} alt="logo" />
</div>
</div>
</div>
)
}
export default Navbar
I tried to modify the '../../assets/logo.svg'; but it doesnt change at all.
picture of the output https://i.stack.imgur.com/5kxvb.png
code of the carousel
import React from 'react'
import AliceCarousel from 'react-alice-carousel';
import { Link } from 'react-router-dom';
import UseAxios from '../hooks/UseAxios'
import "./Trending.css";
const Trending = () => {
const { response } = UseAxios("search/trending");
return (
{response && response.coins.map(coin => {
return <div className='flex slide' key={coin.item.coin_id}>
<Link to={`/coin/${coin.item.id}`}>
<div>
<AliceCarousel
mouseTracking
infinite
autoPlayInterval={1000}
animationDuration={1500}
disableButtonsControls
autoPlay
>
<img src={coin.item.large} className="mt-0 relative top-30 img" />
<p key={coin.item.coin_id} className="name"> {coin.item.name} </p>
</AliceCarousel>
</div>
</Link>
</div>
})}
</div>
)
}
export default Trending;
note:- library being used is AliceCarousel.
can someone please help me fix the carousel.
I've just started using reactJS and i am integrating an HTML admin template in react which has header, sidebar, footer and the main section content.
One thing i'm a bit curious is whenever i click links in the main section content, only the specific section dynamically loads, but when i click on links in sidebar the entire page reloads, why is it so? Below is the code that i'm following
App.js
import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import Header from './Components/Header';
import Content from './Components/Content';
import Footer from './Components/Footer';
import Sidebar from './Components/Sidebar';
const App = () => {
return(
<BrowserRouter>
<Header/>
<Sidebar/>
<Content/>
<Footer/>
</BrowserRouter>
);
}
export default App;
Header.jsx
import React from 'react';
import logo from '../stack.png';
const Header = () => {
return(
<nav>
</nav>
);
}
export default Header;
Sidebar.jsx
import React from 'react';
import { Link } from 'react-router-dom';
const Sidebar = () => {
return(
<aside>
<div className="main-menu menu-fixed menu-dark menu-accordion menu-shadow" data-scroll-to-active="true">
<div className="main-menu-content">
<ul className="navigation navigation-main" id="main-menu-navigation" data-menu="menu-navigation">
<li style={{'margin': '25px 0 0 0'}} className="active nav-item">
<Link to="/dashboard">
<i className="ft-home"></i>
<span className="menu-title">
Dashboard
</span>
</Link>
</li>
<li className="nav-item"></i><span className="menu-title" data-i18n="">Create</span>
<ul className="menu-content">
<li className=" menu-item">
<Link to="/create">
<span className="menu-title">
Create New
</span>
</Link>
</li>
<li className=" menu-item">
<Link to="/createxyz">
<span className="menu-title">
Create XYZ
</span>
</Link>
</li>
</ul>
</li>
</ul>
</div>
</div>
</aside>
);
}
export default Sidebar;
Content.jsx
import React from 'react';
import { Switch, Route } from 'react-router-dom';
import Dashboard from './Dashboard';
import Enter from './Enter';
import Enterxyz from './Enterxyz';
const Content = () => {
return(
<Switch>
<Route exact path="/" component={Dashboard} />
<Route path="/dashboard" component={Dashboard} />
<Route path="/create" component={Enter} />
<Route path="/createxyz" component={Enterxyz} />
</Switch>
);
}
export default Content;
Footer.jsx
import React from 'react';
function Footer()
{
return(
<footer className="footer footer-static footer-light navbar-border">
<p className="clearfix blue-grey lighten-2 text-sm-center mb-0 px-2">
<span className="float-md-left d-block d-md-inline-block">© 2020
<a className="text-bold-800 grey darken-2" href="">
xyz
</a> (All Rights Reserved)
</span>
</p>
</footer>
);
}
export default Footer;
Code snippet in import Enter from './Enter';
import React from 'react';
import { Link } from 'react-router-dom';
const Enter = () => {
return(
<div className="app-content content">
<div className="content-wrapper">
<div className="content-body">
<div className="row">
<div className="col-md-12">
<div className="card" style={{'height': 'auto'}}>
<div className="card-header">
<h4 className="card-title" id="basic-layout-form">Create New Client</h4>
<a className="heading-elements-toggle"><i className="fa fa-ellipsis-v font-medium-3"></i></a>
<div className="heading-elements">
<ul className="list-inline mb-0">
<li><Link to="/dashboard">Dashboard</Link></li>
<li><i className="ft-chevrons-right"></i></li>
<li><a>Create</a></li>
<li><i className="ft-chevrons-right"></i></li>
<li><Link to="/create">Enter New</Link></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
export default Enter;
in the Enter code snippet there are 2 links(Breadcrumbs) when i click on them the page loads dynamically without refresh.
But when i click on the links in sidebar, the entire page reloads to display the content, why is it so? What is wrong?
I am working on react project in that project Home.js is Parent component and Test.js is Child component. In Home.js component I have tag here what I am trying to do is If I Click tag I need to call Test.js component. For this In Home.js I created one function and, To that function I passed Test.js component. and I passed that function via onClick method to h1 tag but its not working. How to achieve this.
This is App.js
import React from 'react';
import './App.css';
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
import Navbar from './Components/Navbar/Navbar';
import Home from "./Pages/Home/Home";
import Test from "./Pages/Test/Test";
function App() {
return (
<div className="App">
<Router>
<Navbar></Navbar>
<Switch>
<Route exact path='/'><Home></Home></Route>
<Route path='/test'><Test></Test></Route>
</Switch>
</Router>
</div>
);
}
export default App;
This is Navbar.js
import React from 'react';
import './Navbar.css';
import { Link } from 'react-router-dom';
export default function Navbar() {
return (
<div className='container'>
<div className='row'>
<div className='col-12'>
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<a className="navbar-brand" href="#">Navbar</a>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarNav">
<ul className="navbar-nav">
<li className="nav-item active">
<Link className='nav-link' to='/'>Home</Link>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
)
}
This is Home.js
import React from 'react';
import './Home.css';
import { Link } from 'react-router-dom';
import Test from '../Test/Test';
export default function Home() {
const Test = () => {
<Test></Test>
}
return (
<div className='container'>
<div className='row'>
<div className='col-12'>
<div>
<h1 onClick={Test}>Cruse</h1>
</div>
</div>
</div>
</div>
)
}
This is Test.js
import React from 'react'
export default function Test() {
return (
<div>
<h1>Test works</h1>
</div>
)
}
I would say you are using event handlers wrong. Their purpose is to produce some kind of side effects, and they don't return a direct result. If you wish to show new element on click i recommend using react state and something like this:
export default function Home() {
const [isTestVisible, setTestVisible] = useState(false);
const showTest= () => setTestVisible(true);
return (
<div className='container'>
<div className='row'>
<div className='col-12'>
<div>
<h1 onClick={showTest}>Cruse</h1>
{isTestVisible && <Test />}
</div>
</div>
</div>
</div>
)
}
In your state you could save different props for each test component so you can customize them. Hope this helps :)
Using states is the correct answer as #Kaca992 said. But for what you do, you can do something like this:
const Test = () => {
ReactDOM.render(<Test/>, document.getElementsByTagName("h1")[0]);
}