We Keep Coding

react router dom not working when changing the path

I am trying to use the router in react but I get nothing when changing the path, you can check the code here Link ..............................
import React from "react";
import Layout from "./Layout";
import Home from "./Home";
import About from "./About";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
function App() {
return (
<Layout>
<Router>
<Routes>
<Route exact path="/" element={<Home />} />
<Route path="/About" element={<About />} />
</Routes>
</Router>
</Layout>
);
}
export default App;
import React from "react";
import { BrowserRouter as Router, Link } from "react-router-dom";
function Layout({ children }) {
return (
<div>
<Router>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
</Router>
<div>{children}</div>
</div>
);
}
export default Layout;

Place the <div>{children}</div> inside <Router>, then in app.js remove Router. Because that has already been declared in <Layout>
Layout.js
import React from "react";
import { BrowserRouter as Router, Link } from "react-router-dom";
function Layout({ children }) {
return (
<div>
<Router>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
<div>{children}</div>
</Router>
</div>
);
}
export default Layout;
App.js
import React from "react";
import Layout from "./Layout";
import Home from "./Home";
import About from "./About";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
function App() {
return (
<Layout>
<Routes>
<Route exact path="/" element={<Home />} />
<Route path="/About" element={<About />} />
</Routes>
</Layout>
);
}
export default App;
Your current code will output the following:
<div>
<Router>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
</Router>
{/* Children (App.js) */}
<Router>
<Routes>
<Route exact path="/" element={<Home />} />
<Route path="/About" element={<About />} />
</Routes>
</Router>
{/* Children (App.js) */}
</div>
You don't need two instances of <Router>.
This how it should be:
<Router>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
{/* Children (App.js) */}
<Routes>
<Route exact path="/" element={<Home />} />
<Route path="/About" element={<About />} />
</Routes>
{/* Children (App.js) */}
</Router>

you need to remove Router from your route wrap
import React from "react"; import Layout from "./Layout"; import Home from "./Home"; import About from "./About"; import { BrowserRouter as Routes, Route } from "react-router-dom";
function App() { return (
<Routes>
<Route exact path="/" element={<Home />} />
<Route path="/About" element={<About />} />
</Routes>
); }
export default App;

The Problem is, that you have two different Routers in your Application.
You need to move the Layout Component inside your Routercomponent in App.js
And then delete the second router inside of Layout.
More info here:
Error: useHref() may be used only in the context of a <Router> component. It works when I directly put the url as localhost:3000/experiences

Uncaught TypeError in React js

i got this following error while i render my component
The above error occurred in the ProductReviews component:
Uncaught TypeError: productReviews is undefined
here is the Appjs component
import "./App.css";
import PreNavbar from "./Components/PreNavbar";
import Navbar from "./Components/Navbar.js";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Slider from "./Components/Slider.js";
import Offers from "./Components/Offers.js";
import data from "./data/data.json";
import Heading from "./Components/Heading.js";
import StarProduct from "./Components/StarProduct.js";
import HotAccessoriesManu from "./Components/HotAccessoriesManu.js";
import HotAccessories from "./components/HotAccessories.js";
import ProductReviews from "./Components/ProductReviews.js";
function App() {
return (
<Router>
<PreNavbar />
<Navbar />
<Slider start={data.banner.start} />
<Offers offer={data.offer} />
<Heading text="STAR PRODUCTS" />
<StarProduct starProduct={data.starProduct} />
<Heading text="HOT ACCESSORIES" />
<HotAccessoriesManu />
<Routes>
<Route
exact
path="/music"
element={
<HotAccessories
music={data.hotAccessories.music}
musicCover={data.hotAccessoriesCover.music}
/>
}
/>
<Route />
<Route
exact
path="/smartDevice"
element={
<HotAccessories
smartDevice={data.hotAccessories.smartDevice} smartDeviceCover={data.hotAccessoriesCover.smartDevice}
/>
}
/>
<Route />
<Route exact path="/home" element={ <HotAccessories home={data.hotAccessories.home} homeCover={data.hotAccessoriesCover.home} /> }/>
<Route />
<Route exact path="/lifestyle" element={ <HotAccessories lifeStyle={data.hotAccessories.lifeStyle} lifeStyleCover={data.hotAccessoriesCover.lifeStyle} /> }/>
<Route />
<Route exact path="/mobileAccessories" element={ <HotAccessories mobileAccessories={data.hotAccessories.mobileAccessories} mobileAccessoriesCover={data.hotAccessoriesCover.mobileAccessories} /> }/>
<Route />
</Routes>
<Heading text="PRODUCT REVEWIES"/>
<ProductReviews ProductReviews={data.productReviews}/>
</Router>
);
}
export default App;
here is productReviews component
import React from 'react'
import ProductReviewCard from "./ProductReviewCard.js"
const ProductReviews = ({productReviews}) => {
return (
<div className="ProductReviews">
{productReviews.map((item,index)=>(
<ProductReviewCard price={item.price} name={item.name} image={item.image} review={item.review} index={index} key={item.image} />
))}
</div>
)
}
export default ProductReviews
Here is the productReviewCard Component
import React from 'react'
const ProductRevieweCard = ({image, index, price, name, review}) => {
return (
<div className='ProductRevieweCard'>
<image src={image} alt={`${index} review`} />
<h5>{review}</h5>
<span>{name}</span>
<b>{price}</b>
</div>
)
}
export default ProductRevieweCard
As i seen everything ok but i don't know why it's not render

There is a typo in the propName for the ProductReviews component in App.js in the Router component.
Please try this - the "p" in ProductReviews prop should be lowerCase and that's why you are getting undefined.
<ProductReviews productReviews={data.productReviews}/>

react-router-dom's Route do not work in my project

I'm in the very first step to create an project, but the react-router-dom's 'Route' just don't work. When i try to use it, just erase all other things in the screen.
My app.js:
import { BrowserRouter, Route } from 'react-router-dom';
import './App.css';
import Header from './components/Header';
import CoinPage from './Pages/CoinPage';
import Homepage from './Pages/Homepage';
function App() {
return (
<BrowserRouter>
<div>
<Header />
<Route path="/" component={Homepage} />
<Route path="/coins/:id" component={CoinPage} />
</div>
</BrowserRouter>
);
}
export default App;
My CoinPage.js:
import React from 'react'
const CoinPage = () => {
return (
<div>
Coin Page
</div>
)
}
export default CoinPage
My Homepage.js:
import React from 'react'
export const Homepage = () => {
return (
<div>
Homepage
</div>
)
}
export default Homepage
My Header.js:
import React from 'react'
/*The header it self:*/
export const Header = () => {
return (
<div>
Header
</div>
)
}
export default Header
When I remove <Route path="/" component={Homepage}/> and <Route path="/coins/:id" component={CoinPage} /> the 'Header' component appears again

You need to wrap all your Route inside Routes Component
import {
BrowserRouter,
Routes,
Route,
} from "react-router-dom";
<BrowserRouter>
<div>
<Header />
<Routes>
<Route path="/" component={Homepage} />
<Route path="/coins/:id" component={CoinPage} />
</Routes>
</div>
</BrowserRouter>
If you are using v6, then component has been replaced by element in Route
<Route path="/" element={<Homepage />} />
<Route path="/coins/:id" element={<CoinPage />} />

Solved!
I needed to change component to element and put each Route in a different Routes tag. Like that:
<BrowserRouter>
<div>
<Header />
<Routes>
<Route path="/" element={<Homepage />} />
</Routes>
<Routes>
<Route path="/coins/:id" element={<Coinpage />} />
</Routes>
</div>
</BrowserRouter>

Replace BrowserRouter with HashRouter

I'm essentially having the same problem as this: React app HashRouter not working on localhost as well as Github User page
I used their solution but it only works with the first link I have up. Is there a way to get multiple links to work.
import React, { Component } from 'react';
import {HashRouter as Router, Route, Switch} from 'react-router-dom';
import { Home } from './Home';
import { Music } from './Music';
import { FullCV } from './FullCV';
import { ContactMe } from './ContactMe';
import { NoMatch } from './NoMatch';
import { NavigationBar } from './components/NavigationBar';
import { Jumbotron } from './components/Jumbotron';
import { Container } from 'react-bootstrap';
import './mycssfile.css';
import { Helmet } from 'react-helmet'
class App extends Component {
render() {
return (
<>
<div>
<Helmet>
<title> My Website </title>
</Helmet>
</div>
<NavigationBar/>
<Jumbotron/>
<Container fluid className = "container">
<Router>
<Switch>
<Route exact path="/" component={(Home)}/>
<Route exact path="/fullCV" component={(FullCV)}/>
<Route exact path="/music" component={Music}/>
<Route exact path="/contactme" component ={(ContactMe)}/>
<Route component={(NoMatch)}/>
</Switch>
</Router>
</Container>
</>
);
}
}
export default App;
It works perfectly on my localhost with BrowserRouter but I need it to work with HashRouter.
Here is a sample of how I'm navigating
import React from 'react';
import headshot from './assets/headshot.jpg';
import headshot2 from './assets/headshot2.jpg';
import { Row, Col, Nav } from 'react-bootstrap';
import styled from 'styled-components';
import { HashRouter as Router, Route, Switch, Link} from 'react-router-dom';
export const Home = () => (
<div className = "homepage">
<Row>
<Col>
<Router>
<Switch>
<Route>
<Nav.Link as = {Link} to = "/fullCV"><h4> Full C/V and Resume </h4></Nav.Link>
</Route>
<Route>
<Nav.Link as = {Link} to = "/music"><h4> Music and Music Videos </h4></Nav.Link>
</Route>
<Route>
<Nav.Link as = {Link} to = "/contactme"><h4> Get in Contact with Me </h4></Nav.Link>
</Route>
</Switch>
</Router>
</Col>
<Col>
<img src = {headshot} height = {380} />
</Col>
</Row>
</div>
)
It only shows the first link, Full CV and Resume, but the rest don't show up.

Had the same issues as you!
How I fixed mine;
I was using BrowserRouter from react-router-dom, but switching to HashRouter fixed it for me.
import { HashRouter, Route, Switch } from 'react-router-dom'
return (
<HashRouter>
<React.Suspense fallback={loading}>
<Switch>
<Route exact path="/login" name="Login Page" render={(props) => <Login {...props} />} />
<Route
exact
path="/register"
name="Register Page"
render={(props) => <Register {...props} />}
/>
<Route exact path="/404" name="Page 404" render={(props) => <Page404 {...props} />} />
<Route exact path="/500" name="Page 500" render={(props) => <Page500 {...props} />} />
<Route path="/" name="Home" render={(props) => <DefaultLayout {...props} />} />
</Switch>
</React.Suspense>
</HashRouter>

A "A <Router> may have only one child element" this is the error I am getting

As I am completely new to React I am trying to wrap my App in Router but I get this error I wrapped it in the div but still not working can someone help me Please ?
Sorry if its irrelevant or stupid question.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import routes from'./routes';
import {Router } from 'react-router-dom';
import history from './history';
import App from './App';
ReactDOM.render(
<Router history={history} routes={routes} >
<div>
<App/>
</div>
</Router>, document.getElementById('root'));
When I use 1 route it works but when i put 2 it doesn't the error is here
import React, { Component } from 'react';
import {BrowserRouter, Route, Switch} from 'react-router-dom';
import AddDetails from './components/AddDetails';
import ShowDetails from'./components/ShowDetails';
import NavBar from "./components/NavBar";
class App extends Component {
render() {
return (
<div >
<NavBar/>
<BrowserRouter>
<Switch>
<Route exact={true} path='/' render={() => (
<div>
<AddDetails />
</div>
)}/>
<Route exact={true} path='details' render={() => (
<div>
<ShowDetails />
</div>
)}/>
</Switch>
</BrowserRouter>
</div>
);
}
}
export default App;

This should work:
ReactDOM.render((
<Router history={history} routes={routes} >
<App/>
</Router>),
document.getElementById('root')
);
As per your update, you should wrap your Router with a div or you may use switch:
<BrowserRouter>
<div>
<Route exact={true} path='/' render={() => (
<div>
<AddDetails />
</div>
)}/>
<Route exact={true} path='details' render={() => (
<div>
<ShowDetails />
</div>
)}/>
</div>
</BrowserRouter>

Add react router Switch to render only one child component
import {BrowserRouter, Route, Switch} from 'react-router-dom';
<BrowserRouter>
<Switch>
<Route exact={true} path='/' render={() => (
<div>
<AddDetails />
</div>
)}/>
<Route exact={true} path='details' render={() => (
<div>
<ShowDetails />
</div>
)}/>
</div>
</BrowserRouter>
Let me know if the issue still persists

Remove routes prop and pass your routes as child of your div/Switch.
Check the quick start:
https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/guides/quick-start.md