Develop Reference

How to fix an 404 error when directly typing in the url in the browser (react-router-dom)?

I want to let users access specific pages when typing in for example www.page-url.com/about-us instead of going via www.page-url.com and then choose about us in the nav bar. When I type in www.page-url.com/about-us, I get a 404 error (page not found). How can this action be prevented? I have tried different solutions from questions here on SO, but none of them worked.
Router code:
<Router >
<MobileNavbar />
<Navbar />
<Switch>
<Route path='/' exact component={Home} />
<Route path='/om-oss' component={AboutUs} />
<Route path='/sponsorar' component={Sponsor} />
<Route path='/bli-sponsor' component={BecomeSponsor} />
<Route path='/bli-medlem' component={BecomeMember} />
<Route path='/admin' exact component={Admin} />
<Route path='/admin-login' exact component={AdminLogin} />
<Route path="/admin/bytt-passord" exact component={ChangeCreds} />
<Route path="/admin/medlemer" exact component={Members} />
<Route path="/til-foreldre" component={Parents} />
<Route path="/kalendar" component={Calendar} />
<Route path="/admin/kalendar" exact component={AdminCalendar} />
</Switch>
<Footer />
</Router>

When the user types some route which you are not supporting then you can have a catch all Route. Add this at the bottom of your Switch .
<Route path='*'><SomeComponent /></Route>
Catch All Routes

Route Naming in React Js

**Working Routes**
<Route path="/moversng" component={AppMoverLandingPage} />
<Route path="/movers-ng/dashboard/login" component={AppMoverLogin} />
<Route path="/movers-ng/dashboard" component={AppDashboard} />
<Route path="/movers-ng/manage-users" component={AppManageUsers} />
**What I wanted but not working**
<Route path="/moversng" component={AppMoverLandingPage} />
<Route path="/moversng/dashboard/login" component={AppMoverLogin} />
<Route path="/moversng/dashboard" component={AppDashboard} /> - *Worked*
<Route path="/moversng/dashboard/manage-users" component={AppManageUsers} /> - *Not working*
Question:
Are they conventional ways of route naming against your folder name?
From what I wanted routes, with those naming, the component/page will not render but retained the previous page.
What am I doing wrongly?
Thanks.

Try adding exact to your routes, without it the routes are being considered child routes:
<Route path="/moversng" exact component={AppMoverLandingPage} />
<Route path="/moversng/dashboard/login" exact component={AppMoverLogin} />
<Route path="/moversng/dashboard" exact component={AppDashboard} /
<Route path="/moversng/dashboard/manage-users" exact component={AppManageUsers}/>

try work with exact
for example:
<Route path="/" component={Home} exact/>
<Route path="/about" component={About} />
<Route path="/login" component={Login} />

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.

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