We Keep Coding

Issue: Only renders one navbar instead of two navbars in Reactjs

const Navbar = () => {
return (
<div>
{location === '/' ? (
<AuthNav />
) : location === '/home' && isAuthenticated ? (
<MainNav />
) : <AuthNav />
}
</div>
);
};
How do I render two separate navbars on different application routes, in this case, I want to render the AuthNav in the login and signup path and I want to render MainNav on the home path.

Issues
I think you've a few things working against you:
The Navbar component is unconditionally rendered and using window.location.pathname to compute which actual navigation component to render. This means the view to be rendered is only computed when the Navbar component rerenders.
The Navbar component is rendered outside the Routes, so it's not rerendered when a route changes.
Solution
Instead of unconditionally rendering Navbar and trying to compute which nav component to render based on any current URL pathname, split them out into discrete layout routes that render the appropriate nav component.
Example:
Navbar.jsx
export const AuthNav = ({ auth }) => {
....
};
export const MainNav = () => {
....
};
App.jsx
import { Routes, Route, Navigate, Outlet } from 'react-router-dom';
import { useState } from "react";
// components
import { AuthNav, MainNav } from './components/Navbar';
// pages
...
...
const AuthLayout = ({ auth }) => (
<>
<AuthNav auth={auth} />
<Outlet />
</>
);
const MainLayout = () => (
<>
<MainNav />
<Outlet />
</>
);
const PrivateRoute = ({ auth }) => {
return auth.isAuthenticated
? <Outlet />
: <Navigate to="/" replace />;
};
const App = () => {
const [isAuthenticated, setIsAuthenticated] = useState(false);
return (
<div className='parent'>
<Routes>
<Route element={<AuthLayout auth={{ isAuthenticated, setIsAuthenticated }} />}>
<Route path='/' element={<SignIn />} />
<Route path='/signup' element={<SignUp />} />
</Route>
<Route element={<MainLayout />}>
<Route element={<PrivateRoute auth={{ isAuthenticated }} />}>
<Route path='/Home' element={<Home />} />
<Route path='/music' element={<Music />} />
<Route path='/genre/' element={<Pop />} />
<Route path='/Hiphop' element={<HipHop />} />
<Route path='/Rock' element={<Rock />} />
<Route path='/EDM' element={<EDM />} />
<Route path='/Jazz' element={<Jazz />} />
<Route path='/RandB' element={<RandB />} />
<Route path='/store' element={<Store />} />
<Route path='/News' element={<News />} />
<Route path='/Contact' element={<Contact />} />
<Route path='/album/:id' element={<Album />} />
<Route path ="/album/:id/nested/" element={<Albums2 />} />
</Route>
</Route>
</Routes>
</div>
);
};

Trouble in configuring nested routes in react router dom v5

I'm having trouble configuring my react-router I'm building a dashboard with 2 pages with nested routes. The first page is the main page with all the protected routes and the second login with unprotected routes. The problem I'm facing is when I place the exact prop on AuthRoute in the Routes component I won't be able to navigate to all the protected routes but I can navigate to login page. If I remove the exact prop I'll be able to navigate to all the protected routes but I can't navigate to the login page. I tried purring the exact on both components it won't work as well
this is may Routes component with two pages Main with all protected routes such as Dashboard and logIn page with another route reset-page
function Routes({ ColorModeContext }) {
return (
<Router>
<Switch>
<AuthRoute
path="/"
ColorModeContext={ColorModeContext}
component={Main}
/>
<Route path="/login" component={Login} />
<Route path="*">
<div className="center">
<Box pb={2}>
<Typography variant="h3">Page Not Found (-_-)</Typography>
</Box>
<Button variant="contained" onClick={() => window.history.back()}>
Go Back
</Button>
</div>
</Route>
</Switch>
</Router>
);
}
this is my AuthRoute that separates protected routes from unprotected routes
const AuthRoute = ({ component: Component, authStatus = true, ...rest }) => {
const { ColorModeContext, ...other } = rest;
return (
<Route
{...other}
render={(props) =>
authStatus ? (
<Component {...props} ColorModeContext={ColorModeContext} />
) : (
<Redirect to="/login" />
)
}
/>
);
};
here's the main page with all the routes
const Main = ({ props }) => {
const { path } = useRouteMatch();
return (
<Box component="main" sx={{ flexGrow: 1, p: 3 }}>
<DrawerHeader />
<Switch>
<Route exact path={path} component={Home} />
<Route path={`${path}/exam-results`} component={ExamResults} />
<Route path={`${path}/new-reg`} component={Registration} />
//...more components
</Switch>
</Box>
);
};
here's the login page
const LogIn = ({ props }) => {
const { path } = useRouteMatch();
return (
<Switch>
<Route exact path={path} component={LogInForm} />
<Route path={`${path}/reset-password`} component={ResetPassForm} />
</Switch>
);
};

implement auth route - with nested /signin and /signup routes

I want to implement simple signin/signup routs with react-router-dom.
here is the App.js
<div className="App">
<Switch>
<Route exact path="/" component={HomePage} />
<Route exact path="/auth" component={SignInSignUpPage} />
</Switch>
</div>
and I'm using route guard like so :
const HomePage = ({ currentUser }) => {
return currentUser ? <HomePageComponent /> : <Redirect to="/auth" />;
};
Now what I want to do, is to have the /auth route, for users to login, and inside a container of both the signInSignUp, I have a Link that will change the route to auth/signup to view the signup page like so:
const SignInSignUpPage = ({ match }) => {
return (
<SignInSignUpContainer>
<Route path={`${match.path}`} component={SignIn} />
<Route path={`${match.path}/signup`} component={SignUp} />
</SignInSignUpContainer>
);
};
which in turn will render the correct component :
const SignInSignUpContainer = ({ match, children, history }) => {
const { isExact } = match;
return (
<SignInSignUpContainerContent>
<SignInSignUpContainerContentForm>
<LockIconContainer iconName="icon-lock-closed" />
{children}
</SignInSignUpContainerContentForm>
</SignInSignUpContainerContent>
);
};
I must be doing it wrong, and the react-router-dom docs are addressing the protected route, which I didn't find suitable for this case.

Just from looking at the structure: you don't send match prop down to SignInSignUpContainer, and it seems that SignInSignUpContainer expects it.
should be :
const SignInSignUpPage = ({ match }) => {
return (
<SignInSignUpContainer match={match}>
<Route path={`${match.path}`} component={SignIn} />
<Route path={`${match.path}/signup`} component={SignUp} />
</SignInSignUpContainer>
);
};
same with history prop

React Conditional rendering doesn't show anything

React app with react-router-dom: 4.3.1:
Main App.js render:
render() {
let routes = (
<Switch>
<Route component={LogIn} path="/login" />
<Redirect to="/login" />
</Switch>
);
if (this.props.isAuthenticated) {
routes = (
<Switch>
<Route component={ParcelListView} path="/" exact />
<Route component={StatusTable} path="/status" />
<Redirect to="/" />
</Switch>
);
}
return (
<div className="app">
{routes}
</div>
);
}
I see white screen When use this code, but when I assign to routes first or second Switch without if it works perfectly in both cases.
I guess the problem comes from assignment in if block. Is this some kind of async thing?

You might want to set routes inside of a <Switch /> component whatever the scenario and have either public or private route components. Here is a common approach:
const PublicRoute = ({
isAuthenticated,
component: Component,
...rest
}) => (
<Route
{...rest}
component={props => (
isAuthenticated ? (
<Redirect to="/somewhere" />
) : (
<Component {...props} />
))}
/>
);
const PrivateRoute = ({
isAuthenticated,
component: Component,
...rest
}) => (
<Route
{...rest}
component={props => (
isAuthenticated ? (
<div>
<Header />
<Component {...props} />
</div>
) : (
<Redirect to="/login" />
)
)}
/>
);
Both components take component (function) and isAuthenticated(boolean) as props and we pass the rest of the props down ({...rest}) anyway (path etc.)
This way you're able to allow/deny routes based on the propspassed down to your components:
...your code
render() {
<Switch>
<PublicRoute path="/" component={YourPublicComponent} />
<PrivateRoute path="/" isAuthenticated component={ParcelListView} />
</Switch>
}
More at Tyler McGinnis's website: https://tylermcginnis.com/react-router-protected-routes-authentication/
Another post on the subject: https://medium.com/#tomlarge/private-routes-with-react-router-dom-28e9f40c7146
You'll be able to find a lot of stuff on the subject on the web

Objects are not valid as a React child using react router v4

This is my wrapper component aka auth component to allow only authed user to access.
Auth.js
render() {
const { Component: component, ...rest } = this.props;
return (
<Route>
{rest}
render={props =>
this.isAuth === true ? (
<Component {...props} />
) : (
<Redirect
to={{
pathname: "/login"
}}
/>
)
}
</Route>
);
}
What's wrong with it? Here's my route declaration
Index.js
render(
<BrowserRouter>
<div className="App">
<Switch>
<Route path="/login" component={Login} />
<Auth path="/dashboard" component={Dashboard} />
</Switch>
</div>
</BrowserRouter>,
document.getElementById("root")
);
I've made a demo to reproduce the problem here
https://codesandbox.io/s/5xm202p1j4
I used the same concept in the official doc, https://reacttraining.com/react-router/web/example/auth-workflow just that instead of making the auth.js a pure function I make it a class base container so that I can call api or check the token of the user exist or not in my localstorage, what's the problem exactly?

Did you mean to do something like this:
render() {
const { Component: component, ...rest } = this.props;
return (
<Route
{...rest}
render={props =>
this.isAuth === true ? (
<Component {...props} />
) : (
<Redirect
to={{
pathname: "/login"
}}
/>
)
}
/>
);
}
By having rest and render in the <Route> tag so the rest are passed to the <Route>?