Develop Reference

React Router DOM is not redirecting to new page without refrest

I want routing facility in my App so I have use react-router-dom for it. I have a checkout button which on clicking should redirect to <Checkout/> page but only the url is changing & not directing to the checkout page until unless user refreshes manually.
Here's my code:
App.js
import "./App.css";
import Header from "./Header";
import Home from "./Home";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Checkout from "./Checkout";
function App() {
return (
<Router>
<div className="App">
<Switch>
<Route exact path="/checkout">
<Header />
<Checkout />
</Route>
<Route path="/">
<Header />
<Home />
</Route>
</Switch>
</div>
</Router>
// header
// home
);
}
export default App;
Checkout Button (Header.js):
import React from "react";
import "./Header.css";
import { GrSearch } from "react-icons/gr";
import { MdShoppingBasket } from "react-icons/md";
import { Link, useHistory} from "react-router-dom";
import { useStateValue } from "./StateProvider";
const Header = () => {
const [{ basket }, dispatch] = useStateValue();
const history = useHistory();
return (
<div className="header">
<Link to="/">
<img
className="header__logo"
src="http://pngimg.com/uploads/amazon/amazon_PNG11.png"
alt=""
></img>
</Link>
<div className="header__search">
<input className="header__searchInput" type="text"></input>
<GrSearch className="header__searchIcon" />
</div>
<div className="header__nav">
<div className="header__option">
<span className="header__optionLineOne">Hello Guest </span>
<span className="header__optionLineTwo">Sign In</span>
</div>
<div className="header__option">
<span className="header__optionLineOne">Returns </span>
<span className="header__optionLineTwo">& Orders</span>
</div>
<div className="header__option">
<span className="header__optionLineOne">Your </span>
<span className="header__optionLineTwo">Prime</span>
</div>
<Link to="/checkout">
<div className="header__optionBasket">
<MdShoppingBasket onClick={ ()=> history.push("/checkout")}/>
<span className="header__optionLineTwo header__basketCount">
{basket?.length}
</span>
</div>
</Link>
</div>
</div>
);
};
export default Header;
May anyone tell me why it's not redirecting to checkout page. I am using React-router-dom v5.2.0
Thanks

ReactJS router doesn't load components unless I refresh the page

ReactJS router doesn't load the component in different route unless I refresh , even though I've created a different project with same installations and It does work properly, but in my current project it doesn't.
App.js
import React, {Component} from 'react';
import { BrowserRouter, Route, Switch} from 'react-router-dom';
import Navigation from './components/Navigation'
import Home from './components/Home'
import Blogs from './components/Blogs'
import Footer from './components/Footer'
import Services from './components/Services'
class App extends Component {
render(){
return (
<BrowserRouter>
<div className='grid-container'>
<Navigation />
<div className='content'>
<Route path='/blogs' component={Blogs} />
<Route path='/' component={Home} exact/>
<Route path='/' component={Services}/>
</div>
<Footer />
</div>
</BrowserRouter>
);
}
}
export default App;
Home.js
import React from 'react';
import {Link, BrowserRouter} from 'react-router-dom'
const Home = () => {
return (
<BrowserRouter>
<section className="carousel-section-wrapper home">
<div className="carousel-inner">
<div className="carousel-section carousel-item active clip-bg pt-225 pb-200 img-bg">
<div className="container">
<div className="row">
<div className="col-xl-8 col-lg-10 mx-auto">
<div className="carousel-content text-center">
<div className="section-title">
<h2>test content</h2>
<p className="text-white">test content</p>
</div>
<Link to="/blogs" className="theme-btn">Read My Blogs</Link>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</BrowserRouter>
)
}
export default Home
Blogs.js
import React from 'react';
const Blogs = () => {
return (
<h1>Blogs</h1>
)
}
export default Blogs
Expected result: componetns home and services disappear, and blogs component appear when I click to any button redirects to /blogs
Actual result: the state of the page stays the same unless I refresh the browser
your help would be appreciated.

You've used BrowserRouter in nested components, in your App and Home components and it won't work this way. To fix this, you only must have the BrowserRouter in the App component.

React component does'nt re-render with react router on url change

strong textI have a carousel component that I created in a jsx file. When I go to a different page and navigate back to that page the carousel doesn't re-render. I have tried updating my routes as well as looking into all possible css causes. I see that the carousel container is there but none of the content is showing.
Below is my jsx file:
import React, { Component, Fragment } from 'react';
import { Link } from 'react-router-dom'
import { Button, Icon } from 'react-materialize'
import ReactDOM from 'react-dom'
import './Carousel.css';
class Carousel extends Component {
render() {
return (
<Fragment>
<div>
<div class="row">
<div class="col s12">
{/* <!--Images and carousel items below --> */}
<div width="100%" id="carousel-div" class="carousel userInput">
<div class="left">
<a href="Previo" class="movePrevCarousel middle-indicator-text waves-effect waves-light">
<i class="material-icons left middle-indicator-text">chevron_left</i>
</a>
</div>
<a class="carousel-item submitBTN" id="letters" data-search='Sports' href="#letters">
<img height="190" width="400" src="https://toddlermasterclass.com/wp-content/uploads/2015/07/Fun-Games-For-Preschoolers.png"
alt="" />
</a>
<a class="carousel-item submitBTN" id="numbers" data-search='Music' href="#numbers">
<img height="190" width="400" src="http://imgsdown.1mobile.com/group1/M00/A5/58/S36rZlagE-mAOxmfAAQhEBsG6mg860.png" alt="" />
</a>
<a class="carousel-item submitBTN" id="colors" data-search='Technology' href="#colors">
<img height="190" width="400" src="https://i.ytimg.com/vi/e1dHmEJcMG0/maxresdefault.jpg" alt="" />
</a>
<a class="carousel-item submitBTN" id="memory-match" data-search='Food' href="#memory-match">
<img height="190" width="400" src="https://images-na.ssl-images-amazon.com/images/I/713UI4Vy1-L.png" alt="" />
</a>
<a class="carousel-item submitBTN" id="shapes" data-search='Arts' href="#shapes!">
<img height="190" width="400" src="https://i.ytimg.com/vi/AQbnbrTHgtA/maxresdefault.jpg" alt="" />
</a>
<a class="submitBTN btn waves-effect waves-light" type="submit" name="action">Submit
<i class="material-icons right">send</i>
</a>
<div class="right">
<a href="Siguiente" class="moveNextCarousel middle-indicator-text waves-effect waves-light">
<i class="material-icons right middle-indicator-text">chevron_right</i>
</a>
</div>
</div>
</div>
</div>
</div>
);
</Fragment>
)
}
}
export default Carousel;
Below is my router file:
import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Navbar from './components/Navbar';
import Parents from './components/Parents';
import Login from './components/Login';
import Home from './components/Home';
import About from './components/About'
import Cards from './components/cardGame';
import Carousel from './components/Carousel';
/* import ReactCarousel from './components/ReactCarousel'; */
import ColorGame from './components/colorGame/colorGame';
import NumberGame from './components/NumberGame/numberGame';
const AppRouter = () => {
// class AppRouter extends Component {
// render() {
return (
<Router>
<div>
{/* edit username */}
<Navbar username='User' message='welcome back!'/>
<Route path='/Login' component={Login} />
<Route path='/Home' component={Home} />
<Route path='/About' component={About} />
<Route path='/Parents' component={Parents} />
<Route path='/colorGame' component={ColorGame} />
<Route path='/cardGame' component={Cards} />
<Route path='/numberGame' component={NumberGame} />
</div>
</Router>
)
}
// }
export default AppRouter;
Below is the Home.js file that I'm rendering my carousel in:
import React, { Component, Fragment } from 'react';
import { Link } from 'react-router-dom';
import { Button, Icon } from 'react-materialize'
import './Home.css';
import ReactDOM from 'react-dom';
import Carousel from '../Carousel';
/* import ReactCarousel from '../ReactCarousel'; */
class Home extends Component {
render() {
return (
<Fragment>
<Carousel />
{/* <ReactCarousel /> */}
</Fragment>
)
}
}
export default Home;
Here is the Navbar component
import React, { Fragment } from 'react';
import { Link } from 'react-router-dom'
import './Navbar.css'
const Navbar = props => {
return (
<Fragment>
<nav className="navigation_container">
<div className="l-triangle-top"></div>
<div className="l-triangle-bottom"></div>
<div className="rectangle">
<div className="navigation">
<Link className='nav-item nav-link' to='/Parents'>Parents Place</Link>
<ul className="right hide-on-med-and-down">
<li><Link className='nav-item nav-link' to='/Home'>Home</Link></li>
<li><Link className='nav-item nav-link' to='/Login'>Logout</Link></li>
<li><Link className='nav-item nav-link' to='/About'>About</Link></li>
</ul>
</div>
</div>
<div className="r-triangle-top"></div>
<div className="r-triangle-bottom"></div>
</nav>
</Fragment>
)
}
export default Navbar;
Would someone help me see why the carousel is not rendering when I navigate back to my home page?

Can you show your <Navbar /> component? Since your home path is path='/Home' make sure you have <Link to='/**H**ome'/> in your NavBar

Module not found: Can't resolve './components/player' in '.../score-board-app/src/components'

I use Create-React-App to build a small React application. The full code is stored in github
My file structure:
src
components
Players.js
Player.js
App.css
App.js
index.css
index.js
...
App.js:
import React from 'react';
import './App.css';
import PropTypes from 'prop-types';// used to fix the error: 'PropTypes' is not defined
import Header from './components/Header';
import Players from './components/Players';
const App = (props) => (
<div className="scoreboard">
<Header title={props.title} />
<Players />
</div>
);
App.propTypes = {
title: PropTypes.string.isRequired
};
export default App;
Player.js:
import React from 'react';
const Player = (props) => (
<div className="player">
<div className="player-name">
Jim Hoskins
</div>
<div className="player-score">
<div className="counter">
<button className="counter-action decrement"> - </button>
<div className="counter-score">31</div>
<button className="counter-action increment"> + </button>
</div>
</div>
</div>
);
export default Player;
Players.js:
import React from 'react';
import Player from './components/Player';
const Players = () => (
<div className="players">
<div className="player">
<div className="player-name">
Jim Hoskins
</div>
<div className="player-score">
<div className="counter">
<button className="counter-action decrement"> - </button>
<div className="counter-score">31</div>
<button className="counter-action increment"> + </button>
</div>
</div>
</div>
<div className="player">
<div className="player-name">
Juan Li
</div>
<div className="player-score">
<div className="counter">
<button className="counter-action decrement"> - </button>
<div className="counter-score">30</div>
<button className="counter-action increment"> + </button>
</div>
</div>
</div>
</div>
)
export default Players;
And the line import Player from './components/Player'; leads to this error:
But if I put this line on top of App.js file, it doesn't report such compiling error. I really want to know what's the issue indeed with my code?

Your file path is wrong. Player is in the same folder as Players, so you need to just say import Player from './Player'

Delete the node_modules directory
Delete the package-lock.json file
Run npm install
Run npm start

Create-React-App: router is marked as required in Link

I've got a problem with Link in react router in one component. Once I try to use Link, the console shows this error: Failed context type: The context router is marked as required in Link, but its value is undefined. I've seen all similar threads about this problem here, but there's no solution to this exact issue. I'm using all the latest versions of all frameworks and componets (just downloaded everything a couple of days ago), so it's definitely not about upgrading anything.
The structure is like this:
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { BrowserRouter as Router, Route} from 'react-router-dom';
import { Link } from 'react-router-dom';
import About from './components/About';
import Posting from './components/Posting';
import Groups from './components/Groups';
ReactDOM.render(<App />, document.getElementById('app'));
ReactDOM.render(
<Router>
<div>
<Route exact path='/' component={About} />
<Route path='/post' component={Posting} />
<Route path='/groups' component={Groups} />
</div>
</Router>,
document.getElementById('content')
);
registerServiceWorker();
App.js
import React, { Component } from 'react';
import { BrowserRouter as Router, Route} from 'react-router-dom';
import { Link } from 'react-router-dom';
import SideMenuUserInfo from './components/sidemenu/SideMenuUserInfo';
import SideMenu from './components/sidemenu/SideMenu';
import SideMenuFooter from "./components/sidemenu/SideMenuFooter";
import TopNav from "./components/topnav/TopNav";
class App extends Component {
render() {
return(
<div className="main_container">
<div className="col-md-3 left_col">
<div className="left_col scroll-view">
<div className="navbar nav_title" style={{border: 0}}>
<i className="fa fa-paw"></i> <span>Logo here</span>
</div>
<div className="clearfix"></div>
<SideMenuUserInfo />
<br />
<SideMenu />
<SideMenuFooter />
</div>
</div>
<TopNav />
<div id="content" className="right_col" role="main">
</div>
<footer>
<div className="pull-right">
Footer text here
</div>
<div className="clearfix"></div>
</footer>
</div>
);
}
}
export default App;
SideMenuUnfoldLink.js
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
class SideMenuUnfoldLink extends Component {
render() {
return(
<li>
<a>
<i className={this.props.faClass}></i>{this.props.text}<span className="fa fa-chevron-down"></span>
</a>
<ul className="nav child_menu">
<li><Link to="/">Home</Link></li> <<<<-- THE PROBLEM IS HERE
</ul>
</li>
);
};
}
export default SideMenuUnfoldLink;
And About.js (as a working example of Link)
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
class About extends Component {
render() {
return (
<div>
<h2>Это About</h2>
<ul>
<li><Link to="/groups">Groups</Link></li>
<li><Link to="/">Main</Link></li>
</ul>
</div>
);
}
}
export default About;
The Link works with the About component like a charm. The error starts to pop up once I use Link in my SideMenuUnfoldLink component.
I suppose the Router is just not initialized by the moment SideMenuUnfoldLink wants to use Link. But how can I go about it?

I've just found the solution. It is to wrap the router around the entire
application to make it available to all components like this:
render() {
return(
<Router>
<div className="main_container">
<div className="col-md-3 left_col">
<div className="left_col scroll-view">
<div className="navbar nav_title" style={{border: 0}}>
<i className="fa fa-paw"></i> <span>Logo here</span>
</div>
<div className="clearfix"></div>
<SideMenuUserInfo />
<br />
<SideMenu />
<SideMenuFooter />
</div>
</div>
<TopNav />
<div id="content" className="right_col" role="main">
</div>
<footer>
<div className="pull-right">
Footer text here
</div>
<div className="clearfix"></div>
</footer>
</div>
</Router>
);
}
And of course removing this part:
ReactDOM.render(
<Router>
<div>
<Route exact path='/' component={About} />
<Route path='/post' component={Posting} />
<Route path='/groups' component={Groups} />
</div>
</Router>,
document.getElementById('content')
);
Here's a more detailed explanation https://reacttraining.com/react-router/
Lots of thanks to the author of that video :)