Develop Reference

Nested Routing in react js. Make default component on user click

<BrowserRouter>
<Routes>
<Route path='/' element={<Home />} />
<Route path='users' element={<Users />} >
<Route path='user1' element={<User1 />} />
<Route path='user2' element={<User2 />} />
<Route path='user3' element={<User3 />} />
</Route>
</Routes>
</BrowserRouter>
____________________________________________
import React from 'react'
import { NavLink, Outlet } from 'react-router-dom'
function Users() {
return (
<div>
<NavLink to='user1'>User1</NavLink>
<NavLink to='user2'>User2</NavLink>
<NavLink to='user3'>User2</NavLink>
<Outlet/>
</div>
)
}
export default Users;
I am using react router dom#6. While hitting users url wanted to make user1 as a default component to show on screen along with users and it also redirects url to users/user1

You can use the <Navigate> element.
<Route path='users' element={<Users />} >
<Route path='' element={<Navigate to="users/user1" replace/>} />
<Route path='user1' element={<User1 />} />
<Route path='user2' element={<User2 />} />
<Route path='user3' element={<User3 />} />
</Route>

How to have react load Home page and then route to others

I have a basic portfolio app that has the following structure:
App.js
function App() {
return (
<BrowserRouter>
<LeftNav />
<RightNav />
<NavBar />
<Switch>
<Route component={Home} path='/' exact />
<Route component={About} path='/about' />
<Route component={Project} path='/projects' />
<Route component={Contact} path='/contact' />
</Switch>
</BrowserRouter>
)
}
When I click on the link to go the production site it only renders the LeftNav, RightNav, and Navbar. I have to click on the Home component to have the Home Screen load.
I then tried putting the Home component outside of to look like:
function App() {
return (
<BrowserRouter>
<LeftNav />
<RightNav />
<NavBar />
<Home />
<Switch>
<Route component={Home} path='/' exact />
<Route component={About} path='/about' />
<Route component={Project} path='/projects' />
<Route component={Contact} path='/contact' />
</Switch>
</BrowserRouter>
)
}
This is the action I want upon clicking on the link, however then my components don't load. How do I structure this so that the Home component loads up on the initial click and that I'm able to navigate to other pages?

Your first version is good, just add a redirect and change the home path
import React from 'react';
import {BrowserRouter, Switch, Route, Redirect} from 'react-router-dom'; // import Redirect
function App() {
return (
<BrowserRouter>
<LeftNav />
<RightNav />
<NavBar />
<Switch>
<Route component={Home} path='/home' exact /> // change the path
<Route component={About} path='/about' />
<Route component={Project} path='/projects' />
<Route component={Contact} path='/contact' />
<Route path="/" exact> // Add the redirect
<Redirect to="/home" />
</Route>
</Switch>
</BrowserRouter>
)
}

You will have to exchange your home path from being the default page:
<Route component={Home} path='/' exact />
to
<Route component={Home} path='/home' exact />
and then add a 'Redirect' to your App.js :
<Route path="/" exact>
<Redirect to="/home" />
</Route>

Hide specific components for a route using React Router

In my code, I want Header & Footer components to be rendered in all routes except '/login'so how to do that? How to hide component on a specific route?
const AppRouter = () => {
return (
<BrowserRouter>
<div>
<Header />
<Switch>
<Route path="/login" component={Login} /> {/* I wanna render this route without Header & Footer */}
<Route path="/" component={Home} exact />
<Route path="/product" component={ProductOverview} />
<Route path="/profile" component={Profile} />
<Route component={NotFound} />
</Switch>
<Footer />
</div>
</BrowserRouter>
);
};

React - How to forward requests to routes that are not listed in the Router to a NotFound (404) component?

Consider the Router :
<Router>
<Fragment>
<Navbar />
{/* <Landing /> */}
<Route exact path="/" component={Landing} />
<section className="containerSpecial">
<Alert />
<Switch>
<Route exact path="/register" component={Register} />
<Route exact path="/forgot-my-password" component={ForgotMyPassword}/>{" "}
<Route exact path="/reset-password" component={ResetPassword} />
<Route exact path="/login" component={Login} />
<PrivateRoute exact path="/dashboard" component={Dashboard} />{" "}
... More PrivateRoutes
// Another route that forwards to "NotFound" Component
</Switch>
</section>
</Fragment>
</Router>
When the user hits a url like http://localhost:3000/dashboard or any other url from the
listed above , is being forward to the corresponding component.
However when users hit http://localhost:3000/ddlksajldsajk or http://localhost:3000/dashboard1
nothing is being rendered.
How can I forward urls that are not listed to a NotFound component ?

just add <Route component={NoMatch} /> :
<Router>
<Fragment>
<Navbar />
{/* <Landing /> */}
<Route exact path="/" component={Landing} />
<section className="containerSpecial">
<Alert />
<Switch>
<Route exact path="/register" component={Register} />
<Route exact path="/forgot-my-password" component={ForgotMyPassword}/>{" "}
<Route exact path="/reset-password" component={ResetPassword} />
<Route exact path="/login" component={Login} />
<PrivateRoute exact path="/dashboard" component={Dashboard} />{" "}
... More PrivateRoutes
// Another route that forwards to "NotFound" Component
<Route component={NotFound} />
</Switch>
</section>
</Fragment>
</Router>
see react router handling 404 pages

Add a new route like this as the very last route:
<Route path='/' component={my404Component} />
Notice it does not have exact. Anything that hasn't been matched will match with it and send them to the 404.

React Router 4 - Different Layouts?

I know this is been asked a few times, but nothing really seemed to apply to me.
I have this
App.js
<React.Fragment>
<Switch>
<Route path="/members" component={MemberAreaComponent} />
<Route exact path="/" component={NonMemberAreaComponent} />
<Route component={NotFoundComponent} />
</Switch>
</React.Fragment >
In members area component I have
// other html above here
<div className="main-area">
<main>
<Switch>
<Route path="/members/home" component={HomeComponent} />
</Switch>
</main>
</div>
NonMemberAreaComponent
<div className="non-members-area-container">
<Route path="/login" component={LoginComponent} />
<Route path="/" component={NonMemberHomeComponent} />
</div>
When I try to do /Login I keep getting my "NotFoundComponent". I think it is "exact" what is messing everything up.

Your second Route only matches when the path is exactly /. Remove the exact prop to make it active when / is just a part of the path.
<React.Fragment>
<Switch>
<Route path="/members" component={MemberAreaComponent} />
<Route path="/" component={NonMemberAreaComponent} />
<Route component={NotFoundComponent} />
</Switch>
</React.Fragment>