ProductPage
MainPage
I want to click on product on MainPage and Open info about it on ProductPage. I want to open exactly that product, that i had clicked on MainPage.
I have an App.js with router. When I click on ProductCard component in MainPage i want to open ProductPage exactly with that props, that shows in ProductCard. How can I do this?
App.js:
<BrowserRouter>
<div className="App">
<Switch>
<Route path="/LoginPage" component={LoginPage} />
<Route exact
path="/"
render={() => <MainPage data={data} />}
//data={data}
/>
<Route path="/RegistrationPage" component={RegistrationPage} />
<Route path="/ProductPage" component={ProductPage} />
</Switch>
</div>
</BrowserRouter>
MainPage:
<div className="product-cards">
{props.data.map(function(item, index) {
return <ProductCard key={index} data={item} />;
})}
</div>
ProductCard:
<a className="a" href="/ProductPage">
<div className="card-block">
<img
className="image-style"
src={props.data.url}
alt={props.data.name}
/>
<span className="product-name">{props.data.name}</span>
</div>
</a>
ProductPage(shows error):
<div className="product-page">
<hr className="hr" />
<div class="product-description">
<img src={props.data.url} alt={props.data.name}/>
</div>
</div>
You aren't passing any props to Product Page which is causing error.
<BrowserRouter>
<div className="App">
<Switch>
<Route path="/LoginPage" component={LoginPage} />
<Route
exact
path="/"
render={() => <MainPage data={data} />}
/>
<Route path="/RegistrationPage" component={RegistrationPage} />
<Route path="/ProductPage"
render={() => <ProductPage data={data} />} />
</Switch>
</div>
</BrowserRouter>;
Related
So i want to access the subcategory Iphones from the Home page . If the user clicks the iphone button they will be directed to the phones page displaying all iphones . Problem is how would i route it ?
export default function Home() {
const { city } = useParams();
console.log(city);
return (
<div className="Home">
<h1> Home </h1>
<Link to={`/${city}/phones`}>
<button> Phones </button>
</Link>
<Link to={`/${city}/${title}`}>
<button> iPhones </button>
</Link>
<Link to={`/${city}/laptops`}>
<button> laptops </button>
</Link>
</div>
);
}
Below is my app page
export default function App() {
return (
<Router>
<div className="App">
<Header />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/:city" element={<Home />} />
<Route path=":city/phones" element={<Phones />} />
<Route path=":city/phones/:title" element={<Productdetails />} />
<Route path=":city/laptops" element={<Laptops />} />
<Route path=":city/laptops/:title" element={<Productdetails />} />
<Route path =":city/:title" element={<Productdetails/>}/>
<Route path="/phones/:title" element={<Productdetails />} />
<Route path="/laptops" element={<Laptops />} />
<Route path="/laptops/:title" element={<Productdetails />} />
<Route path="/:title" element={<Productdetails />} />
</Routes>
</div>
</Router>
);
to make it easy take a look at https://codesandbox.io/s/wandering-mountain-ktcknf?file=/src/screens/Phones.js
How to render Overlay component just for a one time instead of rendering it in each Route.
Here is code of my App.js
function App() {
return (
<div className="App">
<Navbar />
<div className='container'>
<Sidebar />
<Routes>
<Route path='/' element={<Overlay pathName={'Главная'} />} />
<Route path='/orders' element={<Overlay pathName={'Заказы'} />} />
<Route path='/products' element={<Overlay pathName={'Товары'} />} />
<Route path='/reviews' element={<Overlay pathName={'Отзывы'} />} />
<Route path='/checkout' element={<Overlay pathName={'Оформить заказ'} />} />
</Routes>
</div>
</div>
);
}
<Routes>
{
[
{url:'/',pathname:'abc'},
{url:'/orders',pathname:'def'},
{url:'/products',pathname:'ghi'},
{url:'/reviews',pathname:'jkl'},
{url:'/checkout',pathname:'mno'},
].map(elem=><Route key={elem.url} path={elem.url} element={<Overlay pathname={elem.pathname}/>} />)
}
<Routes />
Trying to render dashboard component inside the layout using <Outlet /> but when accessing the /admin/dashboard route, The layout is not rendering. How to fix this?
App.js:
export default function App() {
return (
<div className="App">
<Router>
<Routes>
<Route exact path="/admin" element={<Layout />} />
<Route exact path="/admin/dashboard" element={<Dashboard />} />
</Routes>
</Router>
</div>
);
}
Layout.js:
export default function Layout() {
return (
<Fragment>
<div className="sb-nav-fixed">
<Navbar />
<div id="layoutSidenav">
<div id="layoutSidenav_nav">
<Sidebar />
</div>
<div id="layoutSidenav_content">
<main>
<Outlet />
<Navigate from="admin" to="/admin/dashboard" />
</main>
<Footer />
</div>
</div>
</div>
</Fragment>
);
}
Dashboard.js:
export default function Dashboard() {
return <h1>Dashboard</h1>;
}
Layout routes need to actually have a nested route to be able to have it render its element into the Outlet, not as sibling routes.
export default function App() {
return (
<div className="App">
<Router>
<Routes>
<Route path="/admin" element={<Layout />}>
<Route path="dashboard" element={<Dashboard />} />
</Route>
</Routes>
</Router>
</div>
);
}
Additionally, if you don't want to render anything on "/admin" then remove the redirect from Layout, remove the path prop from the layout route, and update the path of the dashbard.
Example:
export default function Layout() {
return (
<Fragment>
<div className="sb-nav-fixed">
<Navbar />
<div id="layoutSidenav">
<div id="layoutSidenav_nav">
<Sidebar />
</div>
<div id="layoutSidenav_content">
<main>
<Outlet /> // <-- no redirect now
</main>
<Footer />
</div>
</div>
</div>
</Fragment>
);
}
...
export default function App() {
return (
<div className="App">
<Router>
<Routes>
<Route element={<Layout />}>
<Route path="/admin/dashboard" element={<Dashboard />} />
</Route>
<Route path="*" element={<Navigate to="/admin/dashboard" replace />} />
</Routes>
</Router>
</div>
);
}
If the plan is to render other routes into the layout route then keep the paths as they are and move the redirect to an index route.
export default function App() {
return (
<div className="App">
<Router>
<Routes>
<Route path="/admin" element={<Layout />}>
<Route index element={<Navigate to="dashboard" replace />} />
<Route path="dashboard" element={<Dashboard />} />
... other admin routes ...
</Route>
</Routes>
</Router>
</div>
);
}
When I click on the Navigation links the URL changes but the component doesn't render, and when I reload the page with the same link the component renders
APP.js
render() {
return (
<div>
<BrowserRouter>
<Switch>
<Route exact path="/" component={Main} />
<Route path="/Men"component={DisplayPage} />
</Switch>
</BrowserRouter>
</div>
)
}
Nav.js
return (
<div className="MainContainer">
<header>
<nav>
<ul>
<li><Title/></li>
<li><Link to='/Men'>MEN</Link></li>
<li><a href>WOMEN</a></li>
<li><a href>STYLEGUIDE</a></li>
<li><a href>OUTLET</a></li>
</ul>
</nav>
<Cart/>
</header>
</div>
);
Add the Nav component inside <BrowserRouter>:
return (
<div>
<BrowserRouter>
<Nav />
<Switch>
<Route exact path="/" component={Main} />
<Route path="/Men"component={DisplayPage} />
</Switch>
</BrowserRouter>
</div>
)
Can you try like this ?
render() {
return (
<BrowserRouter>
<Nav />
<Switch>
<Route exact path="/" component={Main} />
<Route exact path="/Men"component={DisplayPage} />
</Switch>
</BrowserRouter>
)
}
I am doing the SPA separate with Login Page, but I was unable to route to the login page, the address bar was changed after clicking the logout button, but it did not render any login page content.
Version:
NPM -> 6.4.1
React-Router -> 4
create-react-app
File: index.js
ReactDOM.render(
<Router>
<Switch>
<Route path="/" component={Main} />
<Route path="/login" component={AuthenticateLoginPage} />
</Switch>
</Router>,
document.getElementById("root")
);
Main -> index.js
const SmartCabinet = () => (
<Switch>
<Route exact path='/smartcabinet' component={SmartCabinetIndexPage} />
<Route path='/smartcabinet/:number' component={SmartCabinetEditPage} />
</Switch>
)
const User = () => (
<Switch>
<Route exact path='/user' component={UserIndexPage} />
<Route path='/user/create' component={UserCreatePage} />
<Route path='/user/:number' component={UserEditPage} />
</Switch>
)
render() {
return (
<div>
<div className="ui menu">
<div className="right menu">
<NavLink className="item" exact to="/login">Log out</NavLink>
</div>
</div>
<Grid columns='equal' relaxed={true}>
<Grid.Column width='2'>
<div className="sidenav">
<ul className="header">
<li><NavLink exact to="/">Home</NavLink></li>
<li><NavLink to="/materialrequest">Material Request</NavLink></li>
<li><NavLink to="/smartcabinet">Smart Cabinet</NavLink></li>
<li><NavLink to="/user">User</NavLink></li>
</ul>
</div>
</Grid.Column>
<Grid.Column>
<div className="mainContent">
<Switch>
<Route exact path="/" component={HomePage} />
<Route path="/materialrequest" component={MaterialRequestIndexPage} />
<Route path="/smartcabinet" component={SmartCabinet} />
<Route path="/user" component={User} />
</Switch>
</div>
</Grid.Column>
</Grid>
</div>
);
}
}