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}/>
Related
I'm having some trouble wherein adding a route path to my app, it gives me a blank page on my HomeScreen. I add this line below to my app.js
<Route path="/" element={HomeScreen} exact />
Can you guys help?
App.js
import { BrowserRouter as Router, Route } from "react-router-dom";
import { Container } from "react-bootstrap";
import Header from "./components/Header";
import Footer from "./components/Footer";
import HomeScreen from "./screens/HomeScreen";
const App = () => {
return (
<Router>
<Header />
<main className="py-3">
<Container>
<Route path="/" element={HomeScreen} exact />
</Container>
</main>
<Footer />
</Router>
);
};
export default App;
HomeScreen.js
import { Row, Col } from "react-bootstrap";
import Product from "../components/Product";
import products from "../products";
const HomeScreen = () => {
return (
<>
<h1>Latest Photocards</h1>
<Row>
{products.map((product) => (
<Col key={product._id} sm={12} md={6} lg={4} xl={3}>
<Product product={product} />
</Col>
))}
</Row>
</>
);
};
export default HomeScreen;
Wrap Everything between the BrowserRouter tag
<BrowserRouter>
--here--
<BrowserRouter/>
You have to pass JSX element in your Route as:
<Route path="/" element={<HomeScreen />} exact />
Always wrap all your routes within the BrowserRouter and the Routes Components.
Also the JSX element itself must be passed in to your routes.
Please find the modified snippet below.
<Router>
<Header />
<main className="py-3">
<Container>
<Routes>
<Route path="/" element={<HomeScreen />} exact />
<Routes>
</Container>
</main>
<Footer />
</Router>
Here how i use react-router-dom
index.js
import App from './App';
import { BrowserRouter } from 'react-router-dom';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<Provider>
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
</Provider>
);
App.js
import { Route, Routes } from 'react-router-dom';
function App(){
<>
<NavBar />
<Routes>
<Route path="/">
<Route index={true} element={<Home />} />
</Route>
</Routes>
</>
}
Hope this will solve your issue
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>
import React, { useContext } from 'react';
import Sidebar from "./components/sidebar/Sidebar";
import Topbar from "./components/topbar/Topbar";
import "./app.css";
import Home from "./pages/home/Home";
import { BrowserRouter as Router, Routes, Route, Navigate} from "react-router-dom";
import UserList from "./pages/userList/UserList";
import User from "./pages/user/User";
import NewUser from "./pages/newUser/NewUser";
import ProductList from "./pages/productList/ProductList";
import Product from "./pages/product/Product";
import NewProduct from "./pages/newProduct/NewProduct";
import Login from './pages/login/Login';
import { AuthContext } from './context/authContext/AuthContext';
function App() {
const { user } = useContext(AuthContext);
return (
<Router>
<Routes>
<Route path="/login" element={user ? <Navigate to='/' />: <Login />} />
{user && (
<>
<Topbar/>
<div className="container">
<Sidebar />
<Route exact path="/" element={<Home />} />
<Route path="/users" element={<UserList />} />
<Route path="/user/:userId" element={<User />} />
<Route path="/newUser" element={<NewUser />} />
<Route path="/movies" element={<ProductList />} />
<Route path="/product/:productId" element={<Product />} />
<Route path="/newproduct" element={<NewProduct />} />
</div>
</>
)}
</Routes>
</Router>
);
}
export default App;
After I run this code show this error..
index.tsx:19
Uncaught Error: [Topbar] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>
at invariant (index.tsx:19)
at index.tsx:776
at react.development.js:1104
at react.development.js:1067
at mapIntoArray (react.development.js:964)
at mapIntoArray (react.development.js:1004)
at mapChildren (react.development.js:1066)
at Object.forEachChildren [as forEach] (react.development.js:1103)
at createRoutesFromChildren (index.tsx:760)
at index.tsx:769
I think React version 5 haven't this problem in code. with
Switch.....
I need help for how to implement div in react version 6....with
Routes ?
And I need to help fix Topbar and sidebar problem
i am trying to render different components by clicking on a link but the problem is the url updates and the ui remains same unchanged, everytime i click on different item to render but the same thing happens, i tried a lot to fix it but i can not find a solution for this.
starting from index.js as entry point
import { StrictMode } from "react";
import ReactDOM from "react-dom";
import store from "./Components/store";
import { Provider } from "react-redux";
import "./index.css";
import { BrowserRouter } from "react-router-dom";
import App from "./App";
const rootElement = document.getElementById("root");
ReactDOM.render(
<StrictMode>
<Provider store={store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>
</StrictMode>,
rootElement
);
then App.js to render components
import "./App.css";
import { Routes, Route } from "react-router-dom";
import { SingleTodoPage } from "./Components/SingleTodoPage";
import { EditTodo } from "./Components/EditTodo";
import { Home } from "./Components/Home";
function App() {
return (
<Routes>
<div>
<div className="header-text">Todo List</div>
<div className="box">
<Route path="/" element={<Home />} />
<Route path="todo/:todoId" element={<SingleTodoPage />} />
<Route path="edit/:todoId" element={<EditTodo />} />
</div>
</div>
</Routes>
);
}
export default App;
SingleTodo where linking different components
<SingleTodo />
<List>
{todos.map((todo) => (
<ListItem key={todo.id} className={classes.listRoot}>
<ListItemText primary={todo.name} />
<ListItemSecondaryAction>
<CheckBoxIcon color="primary" />
<DeleteIcon color="secondary" />
<Link to={`edit/${todo.id}`} className="button">
<EditIcon />
</Link>
<Link to={`todo/${todo.id}`}>view</Link>
</ListItemSecondaryAction>
</ListItem>
))}
</List>
codesandbox for more details, i am using useParams hook in SingleTodo and in EditTodo
to get dynamic url params.
please if anyone knows how to solve this please help me...thanks
Move the non-routing-related elements out of the Routes component.
function App() {
return (
<Routes>
<div>
<div className="header-text">Todo List</div>
<div className="box">
<Route path="/" element={<Home />} />
<Route path="todo/:todoId" element={<SingleTodoPage />} />
<Route path="edit/:todoId" element={<EditTodo />} />
</div>
</div>
</Routes>
);
}
To this
function App() {
return (
<div>
<div className="header-text">Todo List</div>
<div className="box">
<Routes>
<Route path="/" element={<Home />} />
<Route path="todo/:todoId" element={<SingleTodoPage />} />
<Route path="edit/:todoId" element={<EditTodo />} />
</Routes>
</div>
</div>
);
}
The Routes component functions largely as the replacement for react-router-dom v4/5's Switch component.
I need to create custom history for that I created this file
import createHistory from "history/createBrowserHistory";
export default createHistory();
and importing this in my App.js file which looks like this:
import React from "react";
import { Router, Route } from "react-router-dom";
import StreamList from "./streams/streamList";
import StreamCreate from "./streams/streamCreate";
import StreamDelete from "./streams/streamDelete";
import StreamEdit from "./streams/streamEdit";
import StreamShow from "./streams/streamShow";
import Header from "./header";
import history from "../history";
function App() {
return (
<div className="ui container">
<Router hitory={history}>
<Header />
<Route path="/" exact component={StreamList} />
<Route path="/streams/new" component={StreamCreate} />
<Route path="/streams/edit" component={StreamEdit} />
<Route path="/streams/delete" component={StreamDelete} />
<Route path="/streams/show" component={StreamShow} />
</Router>
and getting this error:
TypeError: Cannot read property 'location' of undefined new Router E:/xord/streams/modules/Router.js:20 17 | super(props); 18 | 19 | this.state = { > 20 | location: props.history.location
Most probably the problem is the missing <Switch /> component between <Router /> and the <Route /> components. See from the documentation of <Switch />:
Renders the first child <Route> or <Redirect> that matches the location.
Try adding as the following:
<Router hitory={history}>
<Header />
<Switch>
<Route path="/" exact component={StreamList} />
<Route path="/streams/new" component={StreamCreate} />
<Route path="/streams/edit" component={StreamEdit} />
<Route path="/streams/delete" component={StreamDelete} />
<Route path="/streams/show" component={StreamShow} />
</Switch>
</Router>