Este es el código de muestra:
<Route exact path='/user'> <UsersList /> </Route> <Route path='/user/:name'> <Sidebar /> <User /> </Route>UsersList es como una página de inicio/aterrizaje .UsersList y Sidebar ambos componentes contienen una lista de enlaces. Cuando hacemos clic en cualquiera de los enlaces, seremos redirigidos a la página de ese usuario .User representará la información de ese usuario específico. Digamos que estamos en /user/john y queremos ir a /user/jack . Pero cuando hago esto, es decir, cuando hago clic en el enlace para ir de /user/john a /user/jack , React vuelve a renderizar el componente Sidebar .
Pero quiero que el componente de la Sidebar se represente solo una vez y solo cuando path='/user/:name' . ¿Así que cómo se hace?
Para darse cuenta de lo que realmente quiere, necesita usar el diseño.
Si introduce el diseño, se vería así.
<container> <appbar> </appbar> <content> <sidebar> </sidebar> <Route path='/user/:name'> </Route> </content> </container>Por ejemplo, echa un vistazo aesto . (Debe buscar la demostración según el marco que está utilizando)
Si puede mover el componente Sidebar fuera del componente Route , use la etiqueta abreviada React.Fragment como componente principal para todos los elementos JSX .
Así que deberías usar esto
<> <Sidebar /> <Route path='/user/:name'> <User /> </Route> </>