In my component, i wanna scroll the page up when the user click on Link Component witch will change the url and therefore what user sees.
import { Link } from "react-router-dom";
const RelatedMovieItem = props => {
const movie = props.movie;
return (
<div className="card" style={{width: "18rem",marginTop: "10px", padding: 0, marginLeft: "10px"}}>
<img src={movie.imageUrl} className="card-img-top" alt={movie.name} />
<div className="card-body">
<h5 className="card-title">{movie.name}</h5>
<p className="card-text">{movie.description}</p>
<Link to={`/movies/${movie.id}`} className="btn btn-primary">Go to details</Link> //once this clicked i want to scroll the page up
</div>
</div>
);
};
export default RelatedMovieItem;
How to do so?
if every route changes you want to scroll top you can do it using <ScrollToTop> passing children down the tree like that.
<BrowserRouter>
<ScrollToTop>
<Switch>
// your route
</Switch>
</ScrollToTop>
</BrowserRouter>;
And create component ScrollToTop.js
import { useEffect } from "react";
import { useLocation } from "react-router-dom";
export default function ScrollToTop({children}) {
const { pathname } = useLocation();
useEffect(() => {
window.scrollTo(0, 0);
}, [pathname]);
return <>{children}</>;
}
You can make use of window.scrollTo(0,0) by passing it to the onClick attribute.
This way your page will scroll to the top left whenever you click on <Link />.
<Link
to={`/movies/${movie.id}`}
className="btn btn-primary"
onClick={() => window.scrollTo(0, 0)}
>
Go to details
</Link>
you can use a reference and attach it to the component you want to scroll to.
Then onclick you can call ref.current.scrollIntoView()
Related
The sidebar is automatically rendered even i have functionality to implement with click on pizza icon
Main.js component , in this component the functionality of useState Hook for toggling the sidebar is implemented
import React, { useState } from 'react';
import { Navbar } from '../NavBar/Navbar';
import { SideBar } from '../SideBar/sidebar';
import { MainContainer,MainContent,MainItem,MainH1,MainP1,MainButton } from './MainElements';
export const Main = () => {
const [isOpen, setIsOpen] = useState(false);
const toggle = () => {
setIsOpen(!isOpen);
};
return (
<MainContainer>
<Navbar toggle={toggle}/>
<SideBar isOpen={isOpen} toggle={toggle} />
<MainContent>
<MainItem>
<MainH1>
Greatest Pizza Ever
</MainH1>
<MainP1>
Ready as early in the 5 Minutes
</MainP1>
<MainButton>Submit</MainButton>
</MainItem>
</MainContent>
</MainContainer>
)
}
Sidebar.js component which is automatically rendered on the screen
import { SidebarContainer,Icon,CloseIcon,SidebarMenu,SidebarLink,SidebarBtn,SidebarRoute } from "./sidebar.element";
export const SideBar = ({isOpen,toggle})=> {
return(
<SidebarContainer isOpen={isOpen} onClick={toggle}>
<Icon onClick={toggle}>
<CloseIcon/>
</Icon>
<SidebarMenu>
<SidebarLink to="/">Pizzas</SidebarLink>
<SidebarLink to="/">Desserts</SidebarLink>
<SidebarLink to="/"> Full Menu</SidebarLink>
</SidebarMenu>
<SidebarBtn>
<SidebarRoute to="/">Order Now</SidebarRoute>
</SidebarBtn>
</SidebarContainer>
);
}
Navbar.js component which holds the icon and props toggle
import React from 'react';
import { Nav, NavLink, NavIcon, PizzaIcon} from './NavbarElements';
export const Navbar = ({toggle}) => {
return (
<Nav>
<NavLink to='/'>
Muncheese
</NavLink>
<NavIcon onClick={toggle}>
<p>Menu</p>
<PizzaIcon/>
</NavIcon>
</Nav>
)
}
Not so sure what your isOpen do. Did you declare that part inside SidebarContainer?
Try changing it to render conditionally like this
{ isOpen ? <SideBar toggle={toggle}/> : null }
Also its worth pointing out that within your sidebar, you've already set an onClick event listener for the whole sidebar component. The onClick within your Icon is not necessary unless you want a specific part of this component to perform the toggle function then you need to remove the onClick in SidebarContainer.
<SidebarContainer isOpen={isOpen} onClick={toggle}>
I Have two components one is Main.js and Search.js I want to link button in Main.js to navigate to Search.js, but I'm not sure how to do it.
import React from "react";
import classes from "./Main.module.css";
import Aux from "../../hoc/Aux";
import logo from "../../containers/img/Logo.png";
import Search from "../Search/Search";
import { Route } from "react-router-dom";
const Main = () => {
return (
<Aux>
{/* Section starts */}
<section className={classes.Showcase}>
{/* Section Left */}
<div className={classes.ShowcaseLeft}>
<div className={classes.ShowcaseLeftTop}></div>
<div className={classes.ShowcaseLeftBottom}></div>
</div>
{/* Section Right */}
<div className={classes.ShowcaseRight}>
<div className={classes.ShowcaseRightTop}></div>
<div className={classes.ShowcaseRightRest}>
<img src={logo} alt="Logo" />
<p>
Provide weather, water, and climate data, forecasts and warnings
for the protection of life and property and enhancement of the
national economy.
</p>
<Route path="/auth" component={Search} />
</div>
</div>
</section>
</Aux>
);
};
export default Main;
You have two options: either use react-router-dom useHistory hook, or the Link component. Here are the two ways:
// useHistory
import { useHistory } from "react-router-dom";
function Main() {
let history = useHistory();
return (
<button type="button" onClick={()=> history.push("/search")}>
search
</button>
);
}
// Link
import { Link } from "react-router-dom";
function Main() {
let history = useHistory();
return (
<Link to="/search">
<button type="button">
search
</button>
</Link>
);
}
A last piece of advice: I would suggest to add all your paths in a single file, so you can never make any typo. In the end, the ideal would be to write something like: <Link to={path.search}>
I have the below sample code using react-router and context hooks where I am trying to understand why it behaves differently when I use anchors instead of Link components. The Link components are commented out.
This app just simply displays a screen with an html link where you can click it to display component 2 (component 1 is displayed initially). I am updating the context value in the onClick event for the anchor (I use the setName function to update the name in the context).
When I use anchor tags, it doesn't keep the context value that was updated. So when it goes to component2, the name value in the context displays as person1. However, if I comment out the anchors and use the Link components instead, the context value is updated properly.
Why do the Link components work as expected but not the anchors when updating context?
import React, { useContext, useState } from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import { useHistory } from 'react-router-dom';
const NameContext = React.createContext();
function App() {
const [name, setName] = useState('name1');
return (
<NameContext.Provider value={{ name, setName }}>
<Router>
<Route exact path="/" component={Component1} />
<Route exact path="/component1" component={Component1} />
<Route exact path="/component2" component={Component2} />
</Router>
</NameContext.Provider>
);
}
function Component1() {
const { name, setName } = useContext(NameContext);
const history = useHistory();
return (
<>
<div>This is component 1, name = {name}</div>
<a href="/component2" onClick={() => setName('name2')}>
Click to display component 2
</a>
{/* <Link
onClick={() => setName('name2')}
to={(location) => {
return { ...location, pathname: '/component2' };
}}
>
Click to display component 2
</Link> */}
</>
);
}
function Component2() {
const { name, setName } = useContext(NameContext);
const history = useHistory();
return (
<>
<div>This is component 2, name = {name}</div>
<a href="/component1" onClick={() => setName('name3')}>
Click to display component 1
</a>
{/* <Link
onClick={() => setName('name3')}
to={(location) => {
return { ...location, pathname: '/component1' };
}}
>
Click to display component 1
</Link> */}
</>
);
}
export default App;
An anchor tag reloads the browser by default. If you want to avoid this default behavior you can call the preventDefault method on the onClick event.
react-router doesn't use anchor tags either, so if you want to use anchor tags you have to manually update the history.
<div>This is component 1, name = {name}</div>
<a
href="/component2"
onClick={(e) => {
e.preventDefault();
setName("name2");
history.push("/component2");
}}
>
Click to display component 2
</a>
i am currently building a shopping website . i finished the homepage and i have to make routing for other pages
i have 3 main files: App.js, Menuitem.js (which is to execute props), and Homepage.js (which also is used to apply executing props from sections array which includes titles and background images and sections paths)
this is the App js
import React from "react";
import Homepage from './Homepage'
import "./styles.css";
import './Homepage.css'
import {Route, Switch} from "react-router-dom";
const Hatspage=function() {
return(
<div>
<h1>
Hats page
</h1>
</div>
)
}
function App() {
return (
<div>
<Switch>
<Route exact path='/'component={Homepage}/>
<Route path='/hats'component={Hatspage}/>
</Switch>
</div>
);
}
export default App
Menuitem.js
import React from 'react'
import {WithRouter} from 'react'
const Menuitem= function(props){
return(
<div className='card' style={{ backgroundImage: `url(${props.imageUrl})` }} >
<div className='text-frame'>
<h1 className='title'>{props.title}</h1>
<p className='subtitle'>shop now</p>
</div>
</div>
)
}
export default Menuitem
Homepage.js
import React from "react";
import sections from './directory-components';
import Menuitem from "./menu-item-components";
const arrayOne=[sections.slice(0,3)]
const arrayTwo=[sections.slice(3,)]
function extract(item){
return(
<Menuitem
title={item.title} imageUrl={item.imageUrl}/>
)
}
function Homepage(){
return(
<div className='directory-menu'>
<div className='content'>
{sections.slice(0,3).map(extract) }
</div>
<div className='second'>
{sections.slice(3,).map(extract) }
</div>
</div>
)
}
export default Homepage
so i need for example when i click on hats picture i switch to hats page . how to do that
image attached
Thanks in advance
reactjs routing
You can do two different approaches. Both of them will require an extra prop that will be the actual url you want to access when clicking the menu item.
Assuming you modify your section array to look like this:
[{title: 'Your title', imageUrl: 'your-image.jpg', linkUrl: '/hats'}]
And you modify your extract function to add the url value as a prop in the MenuItem component:
function extract(item){
return(
<Menuitem
title={item.title} imageUrl={item.imageUrl} linkUrl={item.linkUrl} />
)
}
You can do this
First one: Using a Link component from react router:
import React from "react";
import { Link } from "react-router-dom";
const Menuitem= function(props){
return(
<Link to={props.linkUrl}>
<div className='card' style={{ backgroundImage: `url(${props.imageUrl})`
}} >
<div className='text-frame'>
<h1 className='title'>{props.title}</h1>
<p className='subtitle'>shop now</p>
</div>
</div>
</Link>
)
}
Now you will have to add extra styling because that will add a regular a tag, but I like this approach because for example you can open the link in a new tab since it is a regular link.
Using the history prop.
import React from "react";
import { useHistory } from "react-router-dom";
const Menuitem= function(props){
const history = useHistory()
const goToPage = () => history.push(props.linkUrl)
return(
<div className='card' style={{ backgroundImage: `url(${props.imageUrl})`
}} onClick={goToPage} >
<div className='text-frame'>
<h1 className='title'>{props.title}</h1>
<p className='subtitle'>shop now</p>
</div>
</div>
)
}
This approach is a basic on click so if you press the component it will go to the selected page, this will work but keep in mind that event bubbling will be harder if you add more on clicks inside the menu item, so please be aware of that.
You should fire an event inside your MenuItem in order to redirect the user
import { useHistory } from 'react-router-dom'
const history = useHistory()
<img onClick={() => history.push('/hats')} />
I am working in React.I have created a button ,which on click should lead the user to the newpage.I made a component About and imported it as well.
I created a function routeChange which would direct to a new page on Clicking the button.But when the button is clicked I am not being directed to any page .
Instead I get an error.
Probably there is not any error with folders.
I imported my About Component as:
import React from 'react';
import {Navbar,NavbarBrand, Jumbotron, Button} from 'reactstrap';
import './App.css';
import Description from './Description';
import './description.css';
import {useHistory,withRouter} from "react-router-dom";
import About from './About';
function App() {
const history=useHistory();
routeChange = () =>{
this.history.push('/About');
}
return (
<withRouter>
<Navbar color="dark">
<div className="container">
<NavbarBrand className="navbar-brand abs" href="/">
Cheat Sheet
</NavbarBrand>
</div>
</Navbar>
<Jumbotron>
<p className="lead">Quick Review ,Revision And Mnemonic Are Always Good</p>
<hr my-2/>
<p className="lead">Page is still under Construction</p>
<Button onClick={routeChange} className="About"color="primary">About Us</Button>
</Jumbotron>
<div className="img-thumbnail">
<Description/>
</div>
<div className="footer">
©Abhilekh Gautam all right reserved.
<p>Follow<a rel="noopener noreferrer"href="https://www.quora.com/profile/Abhilekh-Gautam-1" target="_blank">Abhilekh Gautam</a> On quora</p>
</div>
</withRouter>
)
}
export default App;
a couple issues here.
change function App (){} to const App = () => {} its going to help with your binding later because arrow functions are interpreted differently from declarative functions
this function needs some help
routeChange = () =>{
this.history.push('/About');
}
first of all you have to declare the function as a constant because App is a functional component not a class component.
second of all because App is a functional component you don't need the this keyword because routeChange is an arrow function and is bound to App
your final function should look like this:
const routeChange = () => {
history.push('/About');
}
make your button onClick handler an anonymous function so it is called on click only and not on render
<Button onClick={routeChange}/>
this code makes the route change function get called when the button renders. Instead change it to
<Button onClick={() => routeChange()}
make sure /About is a route to another component in your router or else you will get a 404 error or hit your no match component (if you have one)
your final product should look something like this
in app.js
import React from 'react';
import {Navbar,NavbarBrand, Jumbotron, Button} from 'reactstrap';
import './App.css';
import Description from './Description';
import './description.css';
import {useHistory,withRouter, BrowserRouter, Route, Switch} from "react-router-dom";
import About from './About';
function App() {
return (
<>
<Navbar color="dark">
<div className="container">
<NavbarBrand className="navbar-brand abs" href="/">
Cheat Sheet
</NavbarBrand>
</div>
</Navbar>
<BrowserRouter>
<Switch>
<Route exact path='/' component={Home}/>
<Route exact path='/About' component={About}
</Switch>
</BrowserRouter>
</>
)
}
then your home component would look like this:
import {useHistory} from 'react-router-dom'
const Home = () => {
const history = useHistory();
const routeChange = () => {
history.push('/About');
}
return (
<>
<Jumbotron>
<p className="lead">Quick Review ,Revision And Mnemonic Are Always Good</p>
<hr my-2/>
<p className="lead">Page is still under Construction</p>
<Button onClick={() => routeChange()} className="About"color="primary">About Us</Button>
</Jumbotron>
<div className="img-thumbnail">
<Description/>
</div>
<div className="footer">
©Abhilekh Gautam all right reserved.
<p>Follow<a rel="noopener noreferrer"href="https://www.quora.com/profile/Abhilekh-Gautam-1" target="_blank">Abhilekh Gautam</a> On quora</p>
</div>
</>
)
}
export default Home