location.pathname vs routeur

Question

Je suis encore en train d'apprendre à réagir au routeur v4. et je voudrais savoir quelle est exactement la différence entre faire ce

emplacement en utilisant se

const { 
     match, 
     location, 
     layoutBoxed, 
     navCollapsed, 
     navBehind, 
     fixedHeader, 
     sidebarWidth, 
     theme, 
    } = this.props; 

Option 1

if(location.pathname === '/500'){ 
     return <Page500 /> 

et ce Option 2

<Route path={'/500'} component={Page500} /> 

Quant à moi, alors que la première option affiche tout correctement pour moi, la deuxième, c'est-à-dire celle du routeur, montre le composant dans seulement la moitié de la page. Maintenant, pourquoi cela se passe-t-il? Option 1 résultat -> Option 2 résultat -> Mais le point principal -> Quelle est la différence entre l'utilisation de nom de location.path et le routeur

Answer 1

L'une des principales caractéristiques avec routeur est que réagir vous pouvez faire des choses telles que:

<Route path="/user/:id" component={User} /> 

et id sera transmis dans User composant.

Ex. /user/bob et /user/jill vont tous les deux rendre un composant User, mais dans votre componentDidMount vous pouvez maintenant récupérer les informations utilisateur correctes à partir de votre API.

Avec location.pathname cette tâche devient plus compliquée que @palsrealm mentionné. Mais tout d'abord, le pilier location doit être disponible pour que cette méthode fonctionne.

Il y a d'autres fonctionnalités que vous perdriez, mais c'est la principale à laquelle je peux penser jusqu'à présent. Vous pouvez consulter le Route api documentation here.

EDIT: En ce qui concerne les raisons pour lesquelles le rendu est différent, je ne peux vraiment pas répondre sans plus de contexte. Par exemple, est le Route enveloppé dans un composant Switch comme ceci:

<Switch> 
    // Other routes 
    <Route exact path="/500" component={Page500} /> 
</Switch> 

Answer 2

En Option 2<Route path={'/500'} component={Page500} /> Vous créez un itinéraire qui a un chemin de/500 et charge un composant Page500. Cela signifie que lorsque l'utilisateur accède au chemin spécifié dans l'itinéraire, React-Router rendra le composant où l'itinéraire a été défini.

Dans Option 1,

if(location.pathname === '/500'){ 
     return <Page500 /> 
} 

le composant parent décide du moment de rendre le composant Page500, sur la base de l'hélice location qu'il reçoit. Ce prop location proviendrait finalement d'une route ou du withRouter HOC.Cela équivaut à

<Route render={(props)=>{ 
      if(props.location.pathname === '/500'){ 
          return <Page500 />; 
      }else{ 
      return null; 
      } 
      } 
     } 
    /> 

qui peut également être écrit comme

<Route path={'/500'} component={Page500} />

Donc, pour résumer, vous ne pouvez faire l'option 1 si vous obtenez l'emplacement prop du composant parent, vous peut définir une Route (Option 2) n'importe où dans l'application.

Edit: Si vous avez toutes vos routes comme

return(<div> 
    <Route path={'/500'} component={Page500} /> 
    <Route path={'/confirm-email'} component={PageConfirmEmail} /> 
    <Route path={'/lock-screen'} component={PageLockScreen} /> 
    <Route path={'/login'} component={PageLogin} /> 
    <Route path={'/sign-up'} component={PageSignUp} /> 
    <Route path={'/forgot-password'} component={PageForgotPassword} /> 
    <Route path={'/fullscreen'} component={PageFullscreen} /> 

</div>); 

vous exécutez le risque de multiples voies de rendu qui pourrait être la raison pour laquelle vous obtenez demi-page rendu dans l'option 2. Pour éviter que cela se produise et seulement rendre la première route qui correspond, vous devez ajouter un Switch

return(<div> 
    <Switch> 
    <Route path={'/500'} component={Page500} /> 
    <Route path={'/confirm-email'} component={PageConfirmEmail} /> 
    <Route path={'/lock-screen'} component={PageLockScreen} /> 
    <Route path={'/login'} component={PageLogin} /> 
    <Route path={'/sign-up'} component={PageSignUp} /> 
    <Route path={'/forgot-password'} component={PageForgotPassword} /> 
    <Route path={'/fullscreen'} component={PageFullscreen} /> 
    </Switch> 
</div>); 

Plus sur Switch se trouvent à https://reacttraining.com/react-router/web/api/Switch