Dev Faq
0
votes

Rendu conditionnellement une image d'arrière-plan basée sur la vue actuelle en utilisant réagissant routeur

J'ai défini une image d'arrière-plan sur un composant parent. Lorsque je me dirigeai vers un composant enfant au sein du parent, je ne veux pas voir cette image d'arrière-plan, aucune idée?

My APP.JS Le code rendu est: p> 

return (
  <BrowserRouter>
    <div className="App" style={{ backgroundImage: `url(${bg})` }}>
      <Switch>
        <Route path="/" component={Login} exact />
        <Route path="/Welcome" component={Welcome} />
      </Switch>
    </div>
  </BrowserRouter>
);

5 commentaires

Essayez d'ajouter une image d'arrière-plan au composant de connexion

Si j'ajoute un composant de connexion, il s'applique sous forme de div, ne pas appliquer pour une page entière

Stackoverflow.com/help/minimal-reproductible-example

essaye ça ? retour ( (

)} /> ) ;

Travailler parfait ..!

4 Réponses :

-2
votes

Vous pouvez le faire de cette manière xxx

1 commentaires

Seule l'image n'apparaît que même les contenus de page affichent

2
votes

Celui-ci de @blueseal fonctionne bien. 

return (
  <BrowserRouter>
    <div className="App">
      <Switch>
        <Route
          exact
          path="/"
          component={() => (
            <div className="App" style={{ backgroundImage: `url(${bg})` }}>
              <Login />{' '}
            </div>
          )}
        />
        <Route path="/Welcome" component={Welcome} />
      </Switch>
    </div>
  </BrowserRouter>
);

3 commentaires

Pourquoi avez-vous deux .app divs, un à l'intérieur de l'autre? En outre, vous auriez dû demander à @blueseal de poster son commentaire comme une réponse.

Il serait probablement préférable de simplement mettre le div.app à l'intérieur de votre composant Connexion , plutôt que de l'envelopper dans votre itinéraire .

Eh bien, op peut donner classname = app2 au lieu de app , puis gérez le style style pour la classe app2 . Je viens de poster ça comme un commentaire OP peut comprendre pour ajuster les styles

0
votes

Vous devez vérifier si l'utilisateur est logedIn xxx

0 commentaires
1
votes

Utilisez ceci.props.Location.PathName Pour obtenir la route actuelle en tant que chaîne.

Utilisez-le pour rendre conditionnellement l'image d'arrière-plan dans votre objet de style en ligne comme celui-ci p> 

return (
    <BrowserRouter>
        <div className="App" style={{ this.props.location.pathname !== "/" && backgroundImage: `url(${bg})` }}>
            <Switch>
             <Route path="/" component={Login} exact/>
             <Route path="/Welcome" component={Welcome}/>
           </Switch>
        </div> 
      </BrowserRouter>
  );

0 commentaires

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Interaction profonde avec break and catch
Utilisation de node.js comment renommer tous les fichiers d'un dossier
Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO