I have problem
here is my code
import React from 'react';
import NavLink from 'react-router-dom';
import s from './Navbar.module.css';
const Navbar = () => {
return <nav className={s.nav}>
<div className={s.item}>
Profile
</div>
<div className={`${s.item} ${s.active}`}>
Messages
</div>
<div className={s.item}>
News
</div>
<div className={s.item}>
<a>Music</a>
</div>
<div className={s.item}>
<a>Settings</a>
</div>
</nav>
};
export default Navbar;
It works but when I change to NavLink - White screen is coming
Any advice would be greatly appreciated, thanks!
Related
import React from "react";
import "./Header.css";
import "../App.css";
import { GiUbisoftSun } from "react-icons/gi";
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
import { useState } from "react";
function Header() {
const [header, setHeader] = useState(false);
return (
<div className={header ? "header" : "header active"}>
<div className="headerContainer">
<div className="headerWrapper">
<div className="logo">
<GiUbisoftSun className="logoIcon" />
<span className="logoTitle">SQUARESPACE</span>
</div>
<Router>
<div className="links">
<ul>
<li className="linkProduct">
<Link to="#footer">Product</Link>
</li>
<li className="linkTemplates">
<Link to="/Templates">Templates</Link>
</li>
<li className="linkResources">
<Link to="Resources">Resources</Link>
</li>
</ul>
</div>
<div className="userEntry">
<span className="logIn">LOG IN</span>
<span className="getStarted">GET STARTED</span>
</div>
<Routes>
<Route path="#footer"></Route>
<Route path="/users"></Route>
<Route path="/"></Route>
</Routes>
</Router>
</div>
</div>
</div>
);
}
export default Header;
import React from "react";
import "./footer.css";
function Footer() {
return (
<div className="footer" id="footer">
<div className="footerContainer">
<div className="footerWrapper">
<div className="footerTextIcon">
© 2023 · Made with 💕 by Barbaros Ihtiyar
</div>
</div>
</div>
</div>
);
}
export default Footer;
I tried something like this but without success. I tried to do it by giving an id, but it shows the id in the link, it does not go to the desired place. When my request is pressed, the page scrolls down to where I want it. I also looked at the react-router-dom documentation, but I couldn't find an answer for myself. In the solutions I tried, I could only change the link on the page, when I clicked it, I couldn't take the page to the desired area. I don't know where I went wrong. I would appreciate your help.
you can use the react-scroll-to-element library for this.
For example:- https://codesandbox.io/s/scroll-to-an-element-on-click-in-reactjs-nku0l?from-embed
I used default create-react-app to create a react app. However, when i try to add cards that contain pictures my image does not render. I get a white screen....
My image is located in a folder in src called Images. The rest works until I add in the Card prop and then the screen goes fully white. So I suppose that means it is not working or rendering properly.
import React from 'react';
export default function Card(props) {
return (
<div className="card">
<img src={require("./Images/monstera.jpeg")} alt="monstera"></img>
<div className="card-stats">
<p>{props.name}</p>
<p>{props.price}</p>
</div>
</div>
)
}
import logo from './logo.svg';
import './App.css';
import React from 'react';
import Header from './Components/Header';
import Inventory from './Components/Inventory';
import Cart from './Components/Cart';
import data from './data';
import Card from './Components/Card';
function App() {
return (
<div className="App">
<Header></Header>
<div className="row">
<Inventory>
<div className="cards-list">
<Card>
</Card>
</div>
</Inventory>
<Cart></Cart>
</div>
</div>
);
}
export default App;
Is there something I am doing wrong? Is there a special way to render a react app with an image?
look for any error through console and try cleaning your code a little
turn this
function App() {
return (
<div className="App">
<Header></Header>
<div className="row">
<Inventory>
<div className="cards-list">
<Card>
</Card>
</div>
</Inventory>
<Cart></Cart>
</div>
</div>
);
}
export default App;
into this
function App() {
return (
<div className="App">
<Header />
<div className="row">
<Inventory />
<div className="cards-list">
<Card />
</div>
<Cart />
</div>
</div>
);
}
export default App;
if not required don't use so many div
i tried like ${route} but to be honest i have no idea.
i want to put some helpful links bottom of website and it must show active links name to belong links
import React from 'react'
import './Links.css';
function Links() {
return (
<div>
<div className="links_person">
<div className="links_right_2">
<div className="links_right_cild_2">
<span className="links_span"> You can take look and learn more
about ${route}
</span>
</div>
</div>
</div>
</div>
)
}
export default Links
you can check current route by using useLocation from react-router-dom
something like this
import { useLocation } from 'react-router-dom';
import React from 'react';
import './Links.css';
function Links() {
const location = useLocation();
return (
<div>
<div className="links_person">
<div className="links_right_2">
<div className="links_right_cild_2">
<span className="links_span">
You can take look and learn more about : {location.pathname}
</span>
</div>
</div>
</div>
</div>
);
}
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 have a Navbar React component with a Link component which needs to scroll down to Section component when clicked. I have implemented react-scroll, however, when I click on the Link component, I get target element not found in the browser console.
The Navbar component:
import React, { Component } from "react";
import { Link, animateScroll as scroll, scroller } from "react-scroll";
class Navbar extends Component {
render() {
return (
<div>
<ul>
<li>
<Link to="section1" activeClass="active" spy={true} smooth={true}>
Section 1
</Link>
</li>
</ul>
</div>
);
}
}
export default Navbar;
And the App.js file:
import React from "react";
// Styling
import "./styles/App.css";
// Components
import Navbar from "./components/Navbar";
import SectionOne from "./components/SectionOne";
function App() {
return (
<div className="App">
<div>
<Navbar />
<SectionOne id="section1"/>
</div>
</div>
);
}
export default App;
I used this repo as a reference, however, things don't work. What have I missed here?
I have implemented a div inside of the SectionOne component
<div id="section-one-wrapper">Section One content...</div>
and then specified that id in the Link component:
<Link to="section-one-wrapper" activeClass="active" spy={true} smooth={true}>
Section 1
</Link>
and it worked.