Develop Reference

Links and Routes React JS - accessing phones subcategory from homepage

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

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 />

How to create a nested router with parameters (React)

I need to change component with react-router-dom, but i cannot do it.
I have page with parameter ex:12kb3v124j38727kguby
I go to /channel/12kb3v124j38727kguby => show channel page (account tab)
I need to change account tab the tab to string/number/boolean tab using Link in Navigator
How to solve this?
App.js
function App() {
return (
<div className="App">
<Router>
<Header />
<Switch>
<Route path="/" exact component={LandingPage} />
<Route path="/start" exact component={GetStarted} />
<Route path="/start/auth" exact component={Auth}/>
<Route path="/start/auth/signup" exact component={SignUp}/>
<Route path="/start/auth/signin" exact component={SignIn}/>
<Route path="/account" exact component={Account} />
<Route path="/account/new" exact component={CreateChannel} />
<Route path="/channel/:channel_id" exact component={Channel} />
<Route path="/plans" exact component={Plan} />
<Route path="*" component={NoMatch} />
</Switch>
</Router>
<Loader />
<Toast />
</div>
);
}
export default App;
Channel.jsx
function Channel(props) {
let { path, url } = useRouteMatch();
return (
<main className="relative top-14" style={{height: "300vh"}}>
<Navigator />
<Router>
<Switch>
<Route exact path={path} component={Account} />
<Route exact path={`${path}/string`} component={String} />
<Route exact path={`${path}/number`} component={Number} />
<Route exact path={`${path}/boolean`} component={Boolean} />
<Route exact path={`${path}/docs`} component={Documentation} />
</Switch>
</Router>
</main>
);
}
Navigator.jsx
function Navigator(props) {
let { url } = useRouteMatch();
return (
<div className="top-14 w-full text-white bg-purple-400">
<ul className="flex overflow-x-auto">
<li className="px-4 py-6 text-lg">
<Link to={`${url}`}>Account</Link>
</li>
<li className="px-4 py-6 text-lg">
<Link to={`${url}/string`}>String</Link>
</li>
<li className="px-4 py-6 text-lg">
<Link to={`${url}/number`}>Number</Link>
</li>
<li className="px-4 py-6 text-lg">
<Link to={`${url}/boolean`}>Boolean</Link>
</li>
<li className="px-4 py-6 text-lg">
<Link to={`${url}/docs`}>Documentation</Link>
</li>
</ul>
</div>
);
}

You need to remove exact prop from your Route component that has nested routes.
Like this:
<Route path="/channel/:channel_id" component={Channel} />

React router changes url but not the component

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>
)
}

How to change props.data in dependence of inner component?

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>;