react-router some routes not matching

I have private routes

app-routes.js file

const routes = [
{ path: '/', component: HomePage },
{ path: '/articles/:id', component: Article },
{ path: '/expert', component: Experts },
...
{ path: '/requests', component: ComRequest },
{ path: '/admin', component: AdminHomePage },]

export default routes.map(route => {
 return {
  ...route,
  component: route.component
 }
})

content.js file iterates app-routes as array if not match any routes redirects to /

import routes from 'app-routes'

return(
 <Switch>
  {routes.map(({ path, component }) => (
    <PrivateRoute
     exact
     key={path}
     path={path}
     component={component}
    />
   ))}
  <Redirect to={'/'} />
 </Switch>)

PrivateRoute.js component file checks user if not redirect to /login

function PrivateRoute({ component, ...rest }) {
 return (
  <Switch>
   <Route
    {...rest}
    render={(matchProps) => getUser()
     ?
      <WithLayout
       {...matchProps}
       component={component}
       layout={MainLayout}
      />
      :
      <Redirect to={{ pathname: '/login', state: { from: matchProps.location } }} />}
   />
  </Switch>
 )
}

export default PrivateRoute

getUser() function returns Object string {userdata}

getUser.js

export function getUser() {
 return localStorage.getItem('user')
}

in browser some /articles, /expert routes renders view but random or logic couldn't figure out how routes other some /requests, /admin routes not matching and redirects to /

some times every routes redirect to /

if I comment <Redirect to={'/'}/> some routes renders white screen

and one more annoying thing is on refresh always redirect works goes to / url not staying on matched routes

in app.js checks user if found returns Content if not user returns NotAuthenticatedContent routes

const { user } = useAuth()
if (user && user.id) {
  return <Content />
 } else
  return <NotAuthenticatedContent />
};

user imports from AuthContext

function AuthProvider(props) {
 const [user, setUser] = useState()
 const { user: currentUser } = useSelector((state) => state.account)
 useEffect(() => {
  (async function () {
   if (currentUser && currentUser.jwt)
     setUser(currentUser.user)
   })();
 }, []);
 return (<AuthContext.Provider value={{user}} {...props}/>)
}
const AuthContext = createContext({})
const useAuth = () => useContext(AuthContext)
export {AuthProvider,useAuth}

Working with web-based technology, you need to get used to using browser developer tools. there you will see many errors regarding your empty pages.

these errors are mostly due to major version changes in react, react-router, react-router-dom, and partly how you try to install them with npm.

to solve your problem, first, make sure you have the 5th versions of these tools. trying to install without a version will result in the latest versions installed. switch to v6 when you are confident with your app's functioning but be ready for lots of changes.

npx create-react-app@5 appName
npm install react-router@5
npm install react-router-dom@5

if versions do not match well, you will get errors for incompatible imports on the console, but many of the errors are runtime only on the browser, so open developer tools to see what else is going wrong.

I have tried your code fragments. they don't have a problem except for these version incompatibilities and some logic errors.

• you don't need to export a new object from mapped from your routes unless you really change the structure, so export default routes is enough.

• you dont have a direct route to login page. in the switch component of content.js and outside your private route mapping, add <Route exact key="/login" path="/login" render={Login}/>

• other than these, make sure your routes do not shadow some partial matches

I have uploaded my sample app on github: react-v5-simple-login-route-layout. for this, I used above commands, deleted everything in source folder except index.* and App.js, copied OP's code fragments as is, edited only the parts parts I mentioned above, added missing page components and login/logout pages to clear localstorage, and improvised layout.