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

Nested React Router

I need some help to accomplish routing in ReactJS.
I describe my problem and hope you can help me..
I have famous index.js in this file and I call app.js from it
**index.js**
render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('app')
);
inside app.js I wrote some code for routing as below :
**App.js**
return (
<div>
{message &&
<div className={`alert ${type}`}>{message}</div>
}
<Router history={history}>
<div>
<PrivateRoute exact path="/" component={Main} />
<Route path="/login" component={SignIn} />
</div>
</Router>
</div>
);
this work correctly and after login I redirect to Main.js
and now my problem :
I`ve written some route in Main.js page that all other pages must inherit from that. I mean all other page must have the skeleton of Main.js
here is some code of Main.js
**Main.js**
<main className={classes.content}>
<Link to="/HomePage"> HomePage</Link>
<Link to="/Admin"> Admin </Link>
<Link to="/Menus"> Menu </Link>
<Link to="/Product"> Product </Link>
<div className={classes.appBarSpacer} />
<Switch>
<PrivateRoute path="/HomePage" component={HomePage} />
<PrivateRoute path="/Admin" component={Admin} />
<PrivateRoute path="/Menus" component={Menus} />
<PrivateRoute path="/Product" component={Product} />
</Switch>
</main>
unfortunately none of this routes works..
I`m extremely confused because all of things seems right

Issue
None of your nested paths are an exact match to "/" rendered by the PrivateRoute of the main router, so they are not rendered.
Solution
Place the parent routes in a Switch and reorder the routes so the "/login" path can be matched before the more general "/" path. Remove the exact prop from the "/" path.
App.js
return (
<div>
{message &&
<div className={`alert ${type}`}>{message}</div>
}
<Router history={history}>
<Switch>
<Route path="/login" component={SignIn} />
<PrivateRoute path="/" component={Main} />
</Switch>
</Router>
</div>
);
Main.js
<main className={classes.content}>
<Link to="/HomePage"> HomePage</Link>
<Link to="/Admin"> Admin </Link>
<Link to="/Menus"> Menu </Link>
<Link to="/Product"> Product </Link>
<div className={classes.appBarSpacer} />
<Switch>
<PrivateRoute path="/HomePage" component={HomePage} />
<PrivateRoute path="/Admin" component={Admin} />
<PrivateRoute path="/Menus" component={Menus} />
<PrivateRoute path="/Product" component={Product} />
</Switch>
</main>

Redirecting to an external website in React

I'm having an issue making a link to an external page in React.
My app uses react-router-dom and i have my App.js like this:
function App() {
return (
<Provider store={store}>
<ReactReduxFirebaseProvider {...rrfProps}>
<div className="App my-content">
<Router>
<Header />
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/accommodations" component={Accommodations} />
<Route exact path="/rentals" component={RentalServices} />
<Route exact path="/tours" component={DailyTours} />
<Route exact path="/contacts" component={ContactUs} />
<Route
exact
path="/editaccommodations"
component={EditAccommodations}
/>
<Route
exact
path="/addaccommodation"
component={AddAccommodation}
/>
<Route
exact
path="/accommodations/:id"
component={AccommodationPage}
/>
<Route component={NotFound} />
</Switch>
<Footer />
</Router>
</div>
</ReactReduxFirebaseProvider>
</Provider>
);
}
In my AccommodationPage i have a link to an external page
<ul className="booking-sites p-0">
{accommodations && accommodation.bookings.map((booking, index) => {
return (
<li key={index} className="booking-method">
<a href={booking.link} className="booking-link">
<img
src={booking.logo}
alt={`booking method ${index}`}
className="booking-icon"
/>
</a>
</li>
);
})}
</ul>
booking.link is for example "www.foo.com"
When i click on the link, instead of opening "www.foo.com" it opens "http://localhost:3000/accommodations/www.foo.com"

You can do this by using Link as below. (Replace the a tag with this)
<Link to={{ pathname: booking.link }} />
Also, If you want to open the link in a new tab just simply add target="_blank".

Try changing the booking.link so that it is like http://www.example.com. Include the http://.

the suggestions you gave me seemed not to work so i played a bit with it and while trying to add the http:// from the component (just for a trial) i found the solution:
<a href={`${booking.link}`} className="booking-link">
<img
src={booking.logo}
alt={`booking method ${index}`}
className="booking-icon"
/>
</a>
But i didn't really understand what happened... do you know why now it works?

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