score:3

Accepted answer

issue

after scouring your repo looking for the usual suspect causes for "it does not navigate only the url changes" i didn't find anything odd like multiple router components, etc. i think the issue is your privateroute component isn't passing the props to the route correctly. you're destructuring a prop called rest and then spread that into the route, but you don't pass a rest prop to the privateroute

export default function privateroute({ component: component, rest }) { // <-- rest prop
  const { currentuser } = useauth();
  return (
    <route
      {...rest} // <-- nothing is spread/passed here
      render={props => {
        return currentuser ? (
          <component {...props} />
        ) : (
          <redirect to='/login' />
        );
      }}
    />
  );
}

the routes, these are not passed any prop named rest:

<privateroute exact path='/' component={dashboard} />
<privateroute
  exact
  path='/folder/:folderid'
  component={dashboard}
/>

what i believe to be occurring here is the exact and path props aren't passed to the underlying route component and so the first nested component of the switch is matched and rendered, the "/" one that doesn't have any route params.

solution

the fix is to spread the rest of the passed props into rest instead of destructuring a named rest prop.

export default function privateroute({ component: component, ...rest }) {
  const { currentuser } = useauth();
  return (
    <route
      {...rest}
      render={props => {
        return currentuser ? (
          <component {...props} />
        ) : (
          <redirect to='/login' />
        );
      }}
    />
  );
}

an improvement of your private route may be as follows:

export default function privateroute(props) {
  const { currentuser } = useauth();
  return currentuser ? (
    <route {...props} />
  ) : (
    <redirect to='/login' />
  );
}

this checks your user authentication and renders either a route or redirect. this pattern allows you to use all the regular route props so you aren't locked into using the render prop to render the component.


Related Query

More Query from same tag