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

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>

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 redirect outside of route component

I use React Router in my React application.
In Header component that isn't inside Router component i want to redirect user after register a form, but because Header component is outside of Router component i can't use this.props.history.push('/');.
How can i redirect user in Header component?
This is my App component:
<div>
<Header order={this.order}/>
<Router data={this.state.data}>
<div>
<Menu data={this.state.data}/>
<Route exact path="/" component={Home} />
<Route exact path="/post" component={PostList} />
<Route path="/showpost/:slug" component={ShowPost} />
<Route path="/page/:slug" component={ShowPage} />
<Route path="/login" component={Login} />
<Route path="/register" component={Register} />
<Route path="/forgotpassword" component={Forgot} />
<Route path="/password/reset/:token" component={Reset} />
<Route path="/logout" component={Logout} />
<Route path="/user" component={User} />
<Route path="/saveorder" render={()=><SaveOrder data={this.state.data}/>} />
</div>
</Router>
<Map />
<Footer />
</div>

You can use this.props.history.push('/') if your Header component is passed to the withRouter HOC.
withRouter allows you to get history in component props.
So... in Header component you should import withRouter HOC
import { withRouter } from 'react-router-dom';
and export your Header component like this:
export default withRouter(Header);
You can find more info about programmatic navigation here https://tylermcginnis.com/react-router-programmatically-navigate/
an example of what you want to do is found at the end of the post :)

move Header inside Router, only the component that are inside <Router> that can use any of react-router's apis.
the code would look like this:
<div>
<Router data={this.state.data}>
<div>
<Header order={this.order} />
<Menu data={this.state.data} />
<Route exact path="/" component={Home} />
<Route exact path="/post" component={PostList} />
<Route path="/showpost/:slug" component={ShowPost} />
<Route path="/page/:slug" component={ShowPage} />
<Route path="/login" component={Login} />
<Route path="/register" component={Register} />
<Route path="/forgotpassword" component={Forgot} />
<Route path="/password/reset/:token" component={Reset} />
<Route path="/logout" component={Logout} />
<Route path="/user" component={User} />
<Route
path="/saveorder"
render={() => <SaveOrder data={this.state.data} />}
/>
</div>
</Router>
<Map />
<Footer />
</div>

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