Develop Reference

When I click a button the page does not refresh in React Javascript

I created a page that when I click the shop button the URL is displayed on the url space but the page does not load onclick of the button
import React from "react";
import {withRouter} from 'react-router-dom';
import './menu-item.styles.scss'
const MenuItem= ({title, imageUrl, size, history, linkUrl , match}) => (
<div
className={`${size} menu-item`}
onClick = {() => history.push(`${match.url},${linkUrl}`)}>
<div
className="background-image"
style={{
backgroundImage : `url(${imageUrl})`
}}
/>
<div className="content">
<h1 className="title">{title.toUpperCase()}</h1>
<span className="subtitle">SHOP NOW</span>
</div>
</div>
)
export default withRouter(MenuItem);
The page that is supposed to display is only shown when I refresh the page but when I click the button the url is displayed but not loaded.
import React from 'react';
import {Switch, Route} from 'react-router-dom';
import './App.css';
import HomePage from './pages/homepage/home.component';
import ShopPage from './pages/shop/shop.components';
import Header from './components/header/header.component';
function App() {
return (
<div>
<Header/>
<Switch>
<Route exact path='/' component={HomePage}/>
<Route path='/shop' component={ShopPage}/>
</Switch>
</div>
);
}
export default App;

import { NavLink } from 'react-router-dom';
<NavLink
className={`${size} menu-item`}
to={linkUrl}>
<div
className="background-image"
style={{
backgroundImage : `url(${imageUrl})`
}}
/>
<div className="content">
<h1 className="title">{title.toUpperCase()}</h1>
<span className="subtitle">SHOP NOW</span>
</div>
</NavLink>

Why doesn't link to a specific section id of navlink using react router dom?

I am trying to link a section ID using NavLink of react-router-dom but the link is requested to the server but does not link the specific id.
I want to link section Id with Navlink so that I can easily call the Id by clicking on the Navlink.
*Navbar.js*
import React from "react";
import "./Navbar.css";
import { NavLink } from "react-router-dom";
const Navbar = () => {
return (
<>
<nav>
<div className='container spaceB flex'>
<div className='leftSide'>
<NavLink className='navLink' to={"/"}>
<h1 className='logoH'>{"<Rajib/>"}</h1>
</NavLink>
</div>
<div className='rightSide'>
<ul className='flex'>
<NavLink className='navLink' to='/#intro'>
<li>About</li>
</NavLink>
<NavLink className='navLink' to='/#skills'>
<li>Skills</li>
</NavLink>
<NavLink to='/#works' className='navLink'>
<li>Works</li>
</NavLink>
</ul>
<NavLink className='navLink' to='/#contact'>
<button className='btn'>Contact</button>
</NavLink>
</div>
</div>
</nav>
</>
);
};
export default Navbar;
*App.js*
import "./App.css";
import Intro from "./components/common/Intro";
import Navbar from "./components/common/Navbar";
import Services from "./components/common/Skills";
import Works from "./components/common/Works";
import Contact from "./components/common/Contact";
function App() {
return (
<>
<header>
<Navbar />
</header>
<main>
<Intro />
<Services />
<Works />
<Contact />
</main>
</>
);
}
export default App;
*index.js*
import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import "./index.css";
import App from "./App";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<BrowserRouter>
<Routes>
<Route path='/' exact element={<App />} />
</Routes>
</BrowserRouter>
);
Please suggest the best solution so that i can link the section by calling it's Id in NavLink when clicking the specific navmenu.

React app won't stop loading. Browser console full of errors

I am trying to make a react website and it randomly stopped loading on my browser. The console displays a long list of errors. Most of these are: "tabTarget is null" and "Unchecked lastError value: Error: Unexpected error occured".
I can't seem to find similar problems. Below is my code for App.js, Footer.js, and Index.js.
App.js
import React from 'react';
import { BrowserRouter as Router, Link } from 'react-router-dom';
import Container from 'react-bootstrap/Container';
import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';
//import NavbarBrand from 'react-bootstrap/NavbarBrand';
import './App.css';
import Footer from './components/Footer';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
title: 'My name',
headerLInks: [
{title: 'Home', path: '/'},
{title: 'About', path: '/about'},
{title: 'Contact', path: '/contact'},
],
home: {
title: 'Be Relentless',
subTitle: 'Projects that make a difference',
text: 'Checkout my projects below'
},
about: {
title: 'About me'
},
contact: {
title: 'Let\'s talk'
}
}
}
render() {
return (
<Router>
<Container className='p-0' fluid={true}>
<Navbar className='border-bottom' bg="transparent" expand="lg">
<Navbar.Brand>My Name</Navbar.Brand>
<Navbar.Toggle className="border-0" aria-controls="navbar-toggle" />
<Navbar.Collapse id="navbar-toggle">
<Nav className="ml-auto">
<Link className="nav-link" to="/">Home</Link>
<Link className="nav-link" to="/about">About</Link>
<Link className="nav-link" to="/contact">Contact</Link>
</Nav>
</Navbar.Collapse>
</Navbar>
<Footer />
</Container>
</Router>
)
}
}
export default App;
Footer.js
import React from 'react';
import Container from 'react-bootstrap/esm/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function Footer() {
return (
<Footer className="mt-5">
<Container fluid={true}>
<Row classNam="border-top justify-content-between p-3">
<Col className="p-0" md={3} sm={12}>
My name
</Col>
</Row>
</Container>
</Footer>
)
}
export default Footer;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import 'bootstrap/dist/css/bootstrap.css';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
reportWebVitals();

You are calling the Footer function within itself which causes the loop. Change the Footer function to the following:
function Footer() {
return (
<Container fluid={true}>
<Row classNam="border-top justify-content-between p-3">
<Col className="p-0" md={3} sm={12}>
My name
</Col>
</Row>
</Container>
)
}

Just change your footer to html or another tag for example:
import React from 'react';
import Container from 'react-bootstrap/esm/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function Footer() {
return (
<footer className="mt-5">
<Container fluid={true}>
<Row classNam="border-top justify-content-between p-3">
<Col className="p-0" md={3} sm={12}>
My name
</Col>
</Row>
</Container>
</footer>
)
}

Display a search bar according to the section visited (React.js) EDIT

I'm learning reactjs and I'm trying to appear a search bar in Home section and to disappear it in the Shop section (or other sections).
To better understand, I leave you a reference image: The final result must be like this
This is the code of my component:
import React, {Component} from 'react';
import {Nav, Button, Navbar, Form, FormControl} from 'react-bootstrap';
import {NavLink} from 'react-router-dom';
import {AuthButton} from '../App';
import logo from '../img/logo.png'
class Header extends Component{
render(){
return(
<>
<Navbar>
<div>
<img src={logo} className='main-logo'/>
</div>
<Form className='form'>
<Button className='btn-search'/>
<FormControl type="text" placeholder="Search..." className='barra'/>
</Form>
<Nav className="ml-auto">
<NavLink className= 'nav-link' to='/'>Home</NavLink>
<hr className='hr-header'/>
<Nav.Link className= 'nav-link'>About</Nav.Link>
<hr className='hr-header'/>
<NavLink className= 'nav-link' to='/Shop'>Shop</NavLink>
<hr className='hr-header'/>
<Nav.Link className= 'nav-link'>Help</Nav.Link>
</Nav>
<NavLink to='/Shopping'>
<Button className='btn-cart' variant="secondary">
Your Cart
</Button>
</NavLink>
<AuthButton/>
</Navbar>
</>
)
}
}
export default Header;
And this is how I've imported my component into the Router
import React from 'react';
import './styles/App.css';
import Shop from './container/shop';
import Shopping from './container/shopping';
import Shipping from './container/shipping';
import Payment from './container/payment';
import home from './container/home';
import Product from './container/Product';
import iPhone from './container/iPhone';
import iPad from './container/iPad';
import SignInForm from './components/SignInForm';
import {BrowserRouter as Router, Route, withRouter, Redirect, Switch} from 'react-router-dom';
import {Button, ButtonToolbar, OverlayTrigger, Popover} from 'react-bootstrap';
function App(){
return (
<Router>
<Route>
<Switch>
<Route exact path='/' component={home}/>
<Route path='/Shop' component={Shop}/>
<Route path='/Product' component={Product}/>
<Route path='/iPhone' component={iPhone}/>
<Route path='/iPad' component={iPad}/>
<PrivateRoute path='/Shopping' component={Shopping}/>
<Route path='/Shipping' component={Shipping}/>
<Route path='/Payment' component={Payment}/>
<Route path='/SignInForm' component={SignInForm}/>
<Route path='*' component={() => <div
style = {{
textAlign: 'center',
paddingTop: 250,
fontSize: 30
}}>
<strong>404 NOT FOUND</strong>
</div>}/>
</Switch>
</Route>
</Router>
);
}
export default App;
I've also other files .js for the continers of my sections
Thank you all!

If you create separate components for Nav and Search, life becomes much easier. Place your Search component inside your Nav component, then render Search only at certain addresses (i.e. anything other than /Shop).
import React from "react";
import { withRouter } from "react-router-dom";
import Nav from "/.Nav";
function SearchComponent() {
return <div>My search bar</div>;
}
function MyComponent(props) {
const path = props.location.pathname;
return (
<div>
<Nav>{path !== "/Shop" && <SearchComponent />}</Nav>
</div>
);
}
export default withRouter(MyComponent);
This technique exposes location through withRouter to get the current path (/pageName). Then, it uses conditional rendering to hide the Search if the location is "/Shop."

React-Bootstrap grid contents not displaying

I created a grid inside of a react-bootstrap Jumbotron, but when I export it to my app.jsx none of the grid contents are displayed (but the Jumbotron and my custom styles are)
All of my other components are working fine, so I'm not sure why this isn't.
App.js:
import React, { Component } from 'react';
import {Grid} from 'react-bootstrap';
import {Row} from 'react-bootstrap';
import {Col} from 'react-bootstrap';
import MyNavbar from './modules/MyNavbar.jsx';
import SectionOne from './modules/SectionOne.jsx'
import SectionTwo from './modules/SectionTwo.jsx'
import SectionThree from './modules/SectionThree.jsx';
class App extends Component {
render() {
return (
<div className="App">
<MyNavbar/>
<SectionOne/>
<SectionTwo/>
<SectionThree/>
</div>
);
}
}
export default App;
SectionThree.jsx:
import React, { Component } from 'react';
import {Jumbotron} from 'react-bootstrap';
import howItWorks from './howItWorks.jsx';
class SectionThree extends Component {
render() {
return(
<Jumbotron id="jumbotronThree">
<howItWorks/>
</Jumbotron>
)
}
}
export default SectionThree;
howItWorks.jsx:
import React, { Component } from 'react';
import {Image} from 'react-bootstrap';
import {Grid} from 'react-bootstrap';
import {Col} from 'react-bootstrap';
import {Row} from 'react-bootstrap';
class howItWorks extends Component {
render() {
return(
<div>
<Grid fluid>
<Row>
<Col md={4}>
<div className="searchIcon">
<Image src="http://imgur.com/KgAIBCc.jpg" responsive/>
</div>
</Col>
<Col md={4}>
<div className="payIcon">
<Image src="http://imgur.com/KgAIBCc.jpg" responsive/>
</div>
</Col>
<Col md={4}>
<div className="eatIcon">
<Image src="http://imgur.com/KgAIBCc.jpg" responsive/>
</div>
</Col>
</Row>
<Row>
<Col md={4}>
<p>
test
</p>
</Col>
<Col md={4}>
<p>
test
</p>
</Col>
<Col md={4}>
<p>
test
</p>
</Col>
</Row>
</Grid>
</div>
)
}
}
export default howItWorks;

React components should always start with uppercase letter:
class HowItWorks extends Component {
render() {
...
<Jumbotron id="jumbotronThree">
<HowItWorks/>
...
There is a good answer on stackoverflow here covering this.

The Component Grid is now calling as Container. Type Container instead of Grid in the react js code.