We Keep Coding

How can I navigate to another page in react?

I use react-router-dom, but when i click on the button, the page is rendered on top of the main one.
I do not need a full-fledged menu with a page transition. I have a button in the component and when I click it, I need to go to the next pageenter image description here
enter image description here
import React from "react"
import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom'
import Profile from "../../profile/profile"
import "./UserBlock.scss"
const UserBlock = ({name,city,company}) => {
return (
<Router>
<div className="userBlock">
<div className="userBlock__info">
<div><strong>ФИО: </strong>{name}</div>
<div><strong>Город:</strong> {city}</div>
<div><strong>Компания:</strong> {company}</div>
<button><Link to="/profile">Подробнее</Link></button>
</div>
</div>
<Routes>
<Route path="/App" element={<App/>}/>
<Route path="/profile" element={<Profile/>}/>
</Routes>
</Router>
)
}
export default UserBlock
App.JS
return(
<div className='usersList'>
<div className='usersList__sidebar'>
<span>Сортировка</span>
<SortButton button={sortCity} text="по городу" />
<SortButton button={sortCompany} text="по компании"/>
</div>
<div className="usersList__lists">
<h3>Список пользователей</h3>
{isLoaded ? <img src={preloader} alt="preloader"/> : (
<div className="usersList__items">
{users.map(user => (
<div className="usersList__userCard">
<UserBlock
key={user.id}
name={user.name}
city={user.address.city}
company={user.company.name}/>
</div>
))}
<span>Найдено {count} пользователей</span>
</div>)}
</div>
</div>
)

The <Router> needs to go around everything that you want to change when you navigate.
The picture suggests that you have something like:
<main>
{ users.map(user => <UserBlock {...user} /> }
</main>
in a parent component.
You need to do your routing there and not inside each one of the UserBlocks.

How do I link to a URL outside of my app using the Link component of react-router?

Hey so i am trying to redirect to a external link like github instead of a path within the site,but I am having a problem.
Here Cards.js
import "./Cards.css";
import CardItem from "./CardItem";
function Cards() {
return (
<div className="cards">
<h1>Check out my portfolios!</h1>
<div className="cards__container">
<div className="cards__wrapper">
<ul className="cards__items">
<CardItem
src="images/img-9.jpg"
text="Explore my dribbble profile where underlying are my illustrations and more"
label="Adventure"
path="https://www.google.com/"
/>
<CardItem
src="images/img-2.jpg"
text="Travel through the Islands of Bali in a Private Cruise"
label="Luxury"
path="/services"
/>
</ul>
<ul className="cards__items">
<CardItem
src="images/img-3.jpg"
text="Set Sail in the Atlantic Ocean visiting Uncharted Waters"
label="Mystery"
path="/services"
/>
<CardItem
src="images/img-4.jpg"
text="Experience Football on Top of the Himilayan Mountains"
label="Adventure"
path="/products"
/>
<CardItem
src="images/img-8.jpg"
text="Ride through the Sahara Desert on a guided camel tour"
label="Adrenaline"
path="/sign-up"
/>
</ul>
</div>
</div>
</div>
);
}
export default Cards;
So what i am trying to do instead of that path i am using href and a external link but its showing localhost/https:github.com like link instead of me redirected to the actual site.
also here is the
Carditeam.js
import { Link } from "react-router-dom";
function CardItem(props) {
return (
<>
<li className="cards__item">
<Link className="cards__item__link" to={props.path}>
<figure className="cards__item__pic-wrap" data-category={props.label}>
<img
className="cards__item__img"
alt="Travel Image"
src={props.src}
/>
</figure>
<div className="cards__item__info">
<h5 className="cards__item__text">{props.text}</h5>
</div>
</Link>
</li>
</>
);
}
export default CardItem;
So looking at these two codes what is that i can do to redirect on to a external link instead of a path
i know their is something to be change or twicked in the Carditeam.js for this so sharing it.

The <Link> tag is used to route to views inside your application when using the react-router.
You need an if statement in CardItem so that if props.path is an external link you render an <a class="cards__item__link" href={props.path}>, if it isn't you can render <Link className="cards__item__link" to={props.path}>

the component Link of react-router-dom is for navigation in your application.
You can use <a className="cards__item__link" href={props.path}></a>
But if this CardItem is for internal navigation,
You use Link
So, you can add 1 more props in CardItem
Ex: external
import { Link } from "react-router-dom";
function CardItem(props) {
return (
<>
<li className="cards__item">
{
props.external
?
(
<a className="cards__item__link" href="">
<figure className="cards__item__pic-wrap" data-category="">
<img className="cards__item__img" alt="Travel Image TRUE" src="" />
</figure>
<div className="cards__item__info">
<h5 className="cards__item__text">"TRUE"</h5>
</div>
</a>
)
:
(
<h1 className="cards__item__link">
<figure className="cards__item__pic-wrap" data-category="">
<img className="cards__item__img" alt="Travel Image" src="" />
</figure>
<div className="cards__item__info">
<h5 className="cards__item__text">"BLA"</h5>
</div>
</h1>
)
}
</li>
</>
);
}
export default CardItem;

Can't we iterate material-ui inside an array in React.js?

I have been trying to use material-ui and iterate over it inside an array ( for creating ratings for some items like in e-commerce sites). The code isn't working. On my localhost server, it's not showing any stars at all. Before I made it dynamic, it was working all fine, then I added props to my functional component as per to make it dynamic. Everything else is working just fine except that it's not accepting my matrial-ui icon inside the array for me to iterate over. Moreover, the import statement says "it's value is never read although it's imported"
My code: Product.js:
import React from "react";
import "./Product.css";
import StarRateIcon from "#material-ui/icons/StarRate";
function Product({ id, title, image, price, rating }) {
return (
<div className="product">
<div className="product_info">
<p>{title}</p>
<p className="product_price">
<small>$</small>
<strong>{price}</strong>
</p>
<div className="product_rating">
{Array(rating)
.fill()
.map((_, i) => (
<p StarRateIcon className="star" />
))}
</div>
</div>
<img src={image} alt="" />
<button>Add to Basket</button>
</div>
);
}
export default Product;
My home.js file :
import React from "react";
import "./Home.css";
import Product from "./Product";
function Home() {
return (
<div classname="home">
<div className="home_container">
<img
className="home_image"
src="https://m.media-amazon.com/images/G/01/digital/video/sonata/US3P_JOKER_IMAGE_ID/be07783e-2738-4aaf-b90c-d0ec474d15ae._UR3000,600_SX1500_FMwebp_.jpg"
/>
<div className="home_row">
<Product
id="890778"
title="Description"
price={99.99}
image="https://m.media-amazon.com/images/I/71BGLa7IFtL._AC_UY218_.jpg"
rating={5}
/>
<Product />
</div>
</div>
</div>
);
}
export default Home;
Help Somebody! I can use emoji snippets but I really want this to work. I have imported StarRateIcon and used it. It isn't working.

Looks like you accidentally put a 'p' in front of your icon component name. You have <p StarRateIcon className="star" /> when it should be <StarRateIcon className="star" />

You're rendering a p tag with no content with an invalid attribute, StarRateIcon. It's the reason you're not seeing anything rendered. If you inspect the HTML, you'll most likely see the p tags. You may also see errors in the console about invalid attributes. Your code should look something like this:
Array(rating).fill().map(() => <StarRateIcon className="star" />)

On click on a <link> routing not working but on reloading URL it works

Need help!
In my application, I've created a "Link" for navigating from the current page to another page and for that I've used routes and it is kind of working as on the click on the link URL changes but the page is not navigated to the URL specified on the URL bar which is directly accessible when you reload the URL after click.
I'm new to this technology, please let me know if I've gone wrong somewhere.
App.js
import React from 'react';
import InstaGallery from './components/instaGallery.js';
import Home from './components/home'
import {BrowserRouter as Router,Route,Switch} from 'react-router-dom'
function App() {
return (
<Router>
<Switch>
<Route exact path='/' component={Home} />
<Route path='/instagallery' component={ InstaGallery } />
</Switch>
</Router>
);
}
export default App;
Link.js
<Link to={'/instaGallery'} replace className="menu-anchor"><span><img className="nav-menu-icon" src="https://i.ibb.co/NN8QH7s/Group-1530.png" alt="" />
{/* <img className="nav-menu-icon-hover" src="https://i.ibb.co/k8kVNk9/Group-2958.png" alt="" /> */}
HOME</span></Link>
instaGallery.js
//Page to be navigated on click of link
import React from "react";
import $ from "jquery";
class InstaGallery extends React.Component {
// another function starts
render() {
return (
<div className="container-fluid no-padd">
<div className="gallery-wraper">
<div className="main-grid">
<p className="p-subtext">Tag us to be featured</p>
<p className="p">#yallaparty</p>
<div className="item item1 open" />
<div className="item item2" />
<div className="item item3" />
<div className="item item4" />
<div className="item item5" />
</div>
<div className="description-wraper">
<div className="pen-description">
<div className="date">06/03</div>
<div className="star-ratings-review">
<div className="star-ratings-gallery"><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span></div>
<p className="review-text">
Thank you so much! You did an amazing job on
such short notice. Yalla Party was a major help
and I’ll definitely refer you. Good luck for the
future!
</p>
<p className="text-person">JUMA AL MAJID</p>
</div>
</div>
<div className="gallery-btn"><span>
<button className="gallery-prev-btn">
<img src="https://i.ibb.co/hDfxkr6/Group-629.png" alt="" className="gallery-btn-arrow" />
</button></span><span><button className="gallery-nxt-btn">
<img src="https://i.ibb.co/3hpG9rc/Group-628.png" alt="" className="gallery-btn-arrow" />
</button></span></div>
</div>
</div>
</div>
);
}
}

Try removing exact on with path="/".
Add render method and return something in InstaGallery component.
Question: Why are you importing jQuery in InstaGallery component?

You have to remove {} from Link tag like
<Link to='/instaGallery' replace className="menu-anchor"><span><img className="nav-menu-icon" src="https://i.ibb.co/NN8QH7s/Group-1530.png" alt="" />
{/* <img className="nav-menu-icon-hover" src="https://i.ibb.co/k8kVNk9/Group-2958.png" alt="" /> */}
HOME</span></Link>

React router not changing url

I'm new to React(1 week :P). I have an app that hits an api based on a search term. From those results a user is able to favorite items from the results. When a I clicks on the link for favorites, I am directed to the correct component and the url reflects this change. However, when I enter a new search term, from the side navigation bar that is statically there always, I am presented with the correect information in the correct component, but the url does not change; it still says http://localhost:3000/favorites where it should be http://localhost:3000. Here is the relevant code, if there is any more that you feel is needed to hazard a guess please let me know.
The routes:
return(
<BrowserRouter >
<div className='routes'>
<Route path='/' component={App}/>
<Route path='/favorites' component={Favorites}/>
</div>
</BrowserRouter>
) }
The SearchBox component:
return(
<form className="search-box" >
<input type="text" placeholder="Search.." name="search" autoComplete='off'/>
<button className="fa fa-search" type="submit" onClick={this.handleSearch.bind(this)}>
</button>
</form>
)
And the SideNav component with the links:
return(
<nav className='naviagtion'>
<ul className='mainmenu'>
<div className='img-logout'>
<img src={this.props.info.image} alt='Avatar' />
<Logout handleLogout={this.handleLogout.bind(this)}/>
</div>
<SearchBox search={this.searchHandler.bind(this)}/>
<li>
home
</li>
<li>
favorites
</li>
<li>
playlists
<ul className='submenu'>
<li>
<a href="">
<strong>list of lists</strong>
</a>
</li>
</ul>
</li>
<li>
friends
</li>
</ul>
</nav>
)
I've seen a lot of information of the url changing but the component not rendering. That is not my problem. Then component is rendering correctly, however the url is not reflecting that.
EDIT:
Here is where the SideBar is being rendered in the Home Component.
<div>
<SideBar
info={this.state.info}
logout={this.handleLogout.bind(this)}
search={this.handleSearch.bind(this)}
/>
<Main videos={this.state.videos}/>
</div>
And here is the App.js
<div className='App'>
{localStorage.userData === undefined
? this.renderLogin()
: <Home logout={this.logout.bind(this)} deets=
{localStorage.userData}/>}
</div>

A couple things that might help.
1) The Route component goes inside the Switch component (make sure to import). Also, make sure to use "exact path" for "/" or the user won't make it to "/favorites".
return(
<Switch>
<div className='routes'>
<Route exact path='/' component={App}/>
<Route path='/favorites' component={Favorites}/>
</div>
</Switch>
) }
2) BrowserRouter goes around the whole app (probably in your index.js), which should look something like this:
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom" OR "react-router"
import App from "./src/App";
ReactDOM.render(<BrowserRouter><App/></BrowserRouter>, document.getElementById("app"));
3) The Route components may need to be direct children of Switch, so I'd try removing the div in between. I'll look into it and update this answer when I figure it out.
4) You need to use the Link component instead of an a tag to actually link to the Route's you've set up:
import { Link } from "react-router-dom" OR "react-router" //not sure what you're using
...
return(
<nav className='naviagtion'>
<ul className='mainmenu'>
...
<li>
<Link to="/">home</Link>
</li>
<li>
<Link to="/favorites">favorites</Link>
</li>
...
</ul>
)