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

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

Not able to send status through URL in reactjs

I am trying to send status 404 but I am not able to send it while using the following code. I am using version 5 for react-router-dom. I have tried various ways but its still not showing the correct status and shows 200 for every URL.
return (
<Router>
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to the Pokédex</h1>
</header>
<br />
<br />
<div className="App-body">
<h2>Information about Pokémon, Berries and Machine</h2>
<p>This website will tell you about how pokemon works.</p>
<Link className="showlink" to="/pokemon/page/0">
Pokémon
</Link>
<Link className="showlink" to="/berries/page/0">
Berries
</Link>
<Link className="showlink" to="/machines/page/0">
Machines
</Link>
<Switch>
<Route exact path="/" />
<Route
exact
path="/pokemon/page/:page"
exact
component={PokemonList}
/>
<Route
exact
path="/berries/page/:page"
exact
component={BerriesList}
/>
<Route
exact
path="/machines/page/:page"
exact
component={MachineList}
/>
<Route exact path="/pokemon/:id" exact component={Pokemon} />
<Route exact path="/berries/:id" exact component={Berries} />
<Route exact path="/machines/:id" exact component={Machines} />
<Route path="*" status={404}>
<PageNotFound />
</Route>
</Switch>
</div>
</div>
</Router>
);
}

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

React router v4 rendering issue

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