Develop Reference

How to render 404 page outside main layout

I am using react-router#6, and want to add a route for 404 pages, and render the page outside the main layout. This is what I have so far:
<BrowserRouter>
<Routes>
<Route path='/' element={<Layout />}>
<Route
path='/'
element={<HomePage />}
/>
<Route
path='login'
element={<LoginPage />}
/>
</Route>
<Route
path='*'
element={<PageNotFound />}
/>
</Routes>
</BrowserRouter>
The "*" route works fine, PageNotFound component is rendering outside the layout, as it should. Problem is that the any of the other routes does not show up, only the layout.
What am I missing?

From what you describe it sounds like the Layout component is missing rendering an Outlet component for the nested routes to render their content into.
Example:
import { Outlet } from 'react-router-dom';
const Layout = () => {
...
return (
<>
... common layout UI ...
<Outlet /> // <-- nested routes render out here
</>
);
};
<BrowserRouter>
<Routes>
<Route element={<Layout />}>
<Route path='/' element={<HomePage />} />
<Route path='login' element={<LoginPage />} />
</Route>
<Route path='*' element={<PageNotFound />} />
</Routes>
</BrowserRouter>
For more details you can see the following:
Layout Routes
Outlets

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>

React router v4 ignores exact

I'm trying to render NotFound component or redirect to root route using React router v4 when path is incorrect, but when I'm on "/" my app renders 2 components.
<Switch>
<Navbar>
<Route exact path="/" component={App} />
<Route path="/Other" component={Other} />
<Route component={NotFound} />
</Navbar>
</Switch>
and my Navbar looks like:
render()
{
return(
<div>
{/*Any content here*/}
{this.props.children}
</div>
);
}
If I replace <Route component={NotFound} /> to <Redirect to="/" /> it looks working, but I'm getting an error: Warning: You tried to redirect to the same route you're currently on: "/"
Thanks for your help! :)

The placement of your Switch component is incorrect, it should wrap the components children where Routes are defined
<Navbar>
<Switch>
<Route exact path="/" component={App} />
<Route path="/Other" component={Other} />
<Route component={NotFound} />
</Switch>
</Navbar>

How to perform dynamic component rendering using react router v4?

I have an application with a Login page followed by a Dashboard page. The routes that I've defined in the index.js are like this:
<Router>
<div>
<Route exact path="/" component={Login}/>
<Route path="/dashboard" component={Dashboard} />
</div>
</Router>
Dashboard.js:
return (
<div>
<Header/>
<Footer/>
<Switch>
<Route path="/dashboard/content1" component={content1} />
<Route path="/dashboard/content2" component={content2} />
</Switch>
</div>
);
The Dashboard component is rendering 3 of its child components. Header, Footer and Content1. I want the Dashboard component to render Content1 by default (i.e. when the url is /dashboard) and also when the url is /dashboard/content1, and should render content2 when the url is /dashboard/content2. Header & Footer components should remain. Please suggest the configuration for the Dashboard component to achieve the same.

In React-router v4 you provide Routes within the component, so you can write your Routes as follows
<Router>
<div>
<Route exact path="/" component={Login}/>
<Route path="/dashboard" component={Dashboard} />
</div>
</Router>
and then in the Dashboard Component render method
render() {
return (
<div>
{/* other content */}
<Switch>
<Route exact path="/dashboard" component={content1} />
<Route path="/dashboard/content1" component={content1} />
<Route path="/dashboard/content2" component={content2} />
</Switch>
</div>
)
}

As a variant of an answer to your post before you have edited it, you can do it (nesting) like this:
<Router>
<Header/>
<Content1/>
<Footer/>
<Switch>
<Route exact path="/" component={Login}/>
<Route exact path="/dashboard" component={Dashboard} />
<Route exact path="/dashboard/content1" component={content1} />
<Route exact path="/dashboard/content2" component={content2} />
</Switch>
</Router>

React-Router's Switch component renders the first thing that matches,
so if you put a route without a path last, it will render that if no other routes match, essentially treating it as a default. Like so:
return (
<div>
<Header/>
<Footer/>
<Switch>
<Route path="/dashboard/content2" exact component={Content2} />
<Route component={Content1} />
</Switch>
</div>
);
I have found that rendering a component instead of a Route also works, although I dont know if it's officially supported.
return (
<div>
<Header/>
<Footer/>
<Switch>
<Route path="/dashboard/content2" exact component={Content2} />
<Content1 />
</Switch>
</div>
);

Default component in nested routes in React Router

In React Router I have a nested Route
<Route path='about' component={{main: About, header: Header}}>
<Route path='team' component={Team} />
</Route>
So now it shows Team when I go to /about/team.
But how do I set which Component to be seen when I visit /about?
I have tried
<Route path='about' component={{main: About, header: Header}}>
<IndexRoute component={AboutIndex} />
<Route path='team' component={Team} />
</Route>
and
<Route path='about' component={{main: About, header: Header}}>
<Route path='/' component={AboutIndex} />
<Route path='team' component={Team} />
</Route>
but it doesn't work.
My About component looks like this
class About extends React.Component {
render () {
return (
<div>
<div className='row'>
<div className='col-md-9'>
{this.props.children}
</div>
<div className='col-md-3'>
<ul className='nav nav-pills nav-stacked'>
<li className='nav-item'><IndexLink className='nav-link' to='/about' activeClassName='active'>About</IndexLink></li>
<li className='nav-item'><Link className='nav-link' to='/about/team'>Team</Link></li>
</ul>
</div>
</div>
</div>
);
}
}

REACT ROUTER 4 UPDATE
The default route is the one without a path.
import BrowserRouter from 'react-router-dom/BrowserRouter';
import Switch from 'react-router-dom/Switch';
import Route from 'react-router-dom/Route';
<BrowserRouter>
<Switch>
<Route exact path='/about' component={AboutIndex} />
<Route component={AboutIndex} /> // <--- don't add a path for a default route
</Switch>
</BrowserRouter>
If you don't need this object {main: About, header: Header} in your component, then just put AboutIndex in the component attribute. That should work
<Router history={browserHistory}>
<Route path='about' component={AboutIndex}>
<IndexRoute component={AboutIndex} />
<Route path='team' component={Team} />
</Route>
</Router>
If you still need main and header components, just add them in as either parent, child, or sibling components depending on your needs

React Router v6
The route has an attribute index which is used to define the index route as per the docs.
<Route index element={<DefaultPage />} />

Another way to do I found is to use the Navigate component of the react-router-dom package with the index attribute. After the a user navigates to the support route, it will default to the about page in the following example.
<Route path="support/*" element={<Support />}>
<Route index element={<Navigate to="about" replace />} />
<Route path="about" element={<About />} />
<Route path="contact" element={<Contact/>} />
</Route>