puede agregar una condición con nombre de pathname para mostrar el componente o no

algo como esto:

 const router = useRouter(): return ( ... {router.pathname !== '/login' && <Sidebar path={router.route} />} ... )

Si tiene algunas páginas que están protegidas y pueden ser vistas por un usuario conectado, necesitará Rutas públicas y protegidas y solo puede mostrarlas en sus rutas públicas

Si este no es el caso, la solución mencionada por @kaveh karami es buena

Crearía un HOC (componente de orden superior) llamado WithSidebar:

 import Main from '../../components/Main/Main'; import Sidebar from '../../components/Sidebar/Sidebar'; import classes from './WithSidebar.module.scss'; const WithSidebar = (Component) => { return props => ( <div className={classes.WithSidebar}> <Sidebar /> <Main className={classes.Container}> <Component {...props} /> </Main> </div> ); }; export default WithSidebar;

Y luego exporte las páginas que deberían incluir la barra lateral así:

 import WithSidebar from '../hoc/WithSidebar/WithSidebar'; const MyPage = () => { return (...) } export default WithSidebar(MyPage)

Encuentro este enfoque realmente más limpio que el renderizado condicional basado en el nombre de la ruta.