Develop Reference

Render error render in error content area

const Pages = () => {
return (
<>
<Box display="flex">
{window.location.pathname === "/profile" ? undefined : <Sidebar />}
<Box flex={3}>
<Navbar />
<Routes>
{/* Content Area */}
<Route exact path="/" element={<Dashboard />} />
<Route exact path="/calendar" element={<Calendar />} />
<Route exact path="/task" element={<div>Task</div>} />
<Route exact path="/projects" element={<div>Projects</div>} />
<Route exact path="/teamMember" element={<div>Team Member</div>} />
<Route exact path="/profile" element={<Profile />} />
{/* Error Path */}
<Route path="*" element={<div>404</div>} />
</Routes>
</Box>
</Box>
</>
);
};enter code here
Hello, where do I put my error path because when it renders, it renders on my content area?

It is because you continually render a layout(Box, Sidebar, Navbar). There are a few options in order to achieve your request you have to either:
create a Layout component that will render Box, Sidebar, and Navbar inside and use that Layout inside your pages, for example:
const Dashboard = () => {
// ...
return (
<Layout>
Dashboard content
</Layout>
)
}
or use the benefit of the new latest react-router package:
import { Outlet } from 'react-router-dom'
const Layout = () => {
return (
<Box display="flex">
{window.location.pathname === "/profile" ? undefined : <Sidebar />}
<Box flex={3}>
<Navbar />
<Outlet /> {/* Roughly speaking this is `children`. Refer to the documentation */}
</Box>
)
}
<Routes>
<Route element={<Layout />} path="/">
<Route index element={<Dashboard />} />
<Route path="/calendar" element={<Calendar />} />
<Route path="/task" element={<div>Task</div>} />
<Route path="/projects" element={<div>Projects</div>} />
<Route path="/teamMember" element={<div>Team Member</div>} />
<Route path="/profile" element={<Profile />} />
</Route>
<Route path="*" element={<div>404</div>} />
</Routes>

On login screen layout keeps showing - React & React router

As I mentioned I have MUI Theme Provider with Layout which includes Dashboard, Order screens ...
When user hits '/' endpoint it should return Login Screen but Layout keeps showing itself.
-App.js
<ThemeProvider theme={theme}>
<Router>
<Layout>
<Switch>
<Route exact path="/">
<Login />
</Route>
<Route path="/dashboard">
<Dashboard />
</Route>
<Route path="/orders">
<Orders />
</Route>
<Route path="/users">
<Users />
</Route>
<Route path="/employees">
<Employee />
</Route>
</Switch>
</Layout>
</Router>
</ThemeProvider>
);
-Layout.js
...AppBar,Sidebar etc
<div style={{width:'100%'}}>
<div className={classes.toolbar}></div>
{children}
</div>

As-is, the code is unconditionally rendering a Layout component outside the Switch, so it's rendered regardless of the currently matched route.
If you want the Layout component to only render on certain routes, conditionally render it with those routes.
Example, render the Login component on exactly the "/" path, everything else into a route rendering the Layout and another Switch.
<ThemeProvider theme={theme}>
<Router>
<Switch>
<Route exact path="/">
<Login />
</Route>
<Route path="/">
<Layout>
<Switch>
<Route path="/dashboard">
<Dashboard />
</Route>
<Route path="/orders">
<Orders />
</Route>
<Route path="/users">
<Users />
</Route>
<Route path="/employees">
<Employee />
</Route>
</Switch>
</Layout>
</Route>
</Switch>
</Router>
</ThemeProvider>

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 router v5 : 3rd level of nesting is not recognising path

I am creating an app which requires multiple level of nesting. from 3rd level my routes are not getting recognised.
App JS
const App = () => {
return (
<React.Fragment>
<Router>
<Switch>
<Route path="/login">
<Login />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</Router>
</React.Fragment>
);
};
Home JS
export default class Home extends React.Component {
render() {
return (
<React.Fragment>
<Header />
<ContentNav />
<Switch>
<Route path="/clients">
<Clients />
</Route>
<Route path="/publishers">
<Publishers />
</Route>
<Route path="/">
<Redirect to="/clients" />
</Route>
</Switch>
</React.Fragment>
);
}
}
Clients JS
class Clients extends React.Component {
render() {
return (
<React.Fragment>
Clients Page
<Switch>
<Route path="/add">
<AddClient />
</Route>
<Route path="/edit">
<AddClient />
</Route>
<Route path="/">
<Entity />
</Route>
</Switch>
</React.Fragment>
);
}
}
these routers are rendering same component
http://localhost:3000/clients
http://localhost:3000/clients/add
http://localhost:3000/clients/edit

react nested urls are not relative, have to specify absolute path :
<Switch>
<Route path="clients/add">
<AddClient />
</Route>
<Route path="clients/edit">
<AddClient />
</Route>
<Route path="clients/">
<Entity />
</Route>
</Switch>