location.pathname vs router

Question

我還在學習反應路由器v4。我想知道究竟是什麼做用

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

選項1

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

這 選項此

獲得位置之間的差異2

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

對於我來說，雖然第一個選項可以正確顯示我的所有內容，但第二個選項即路由器之一，只顯示一半頁面中的組件。 現在，爲什麼會發生這種情況？ 選項1個結果 - > 選項2結果 - > 但主要的點 - >是使用什麼名稱location.path和路由器

Answer 1

之一與主特徵之間的差作出反應路由器是你可以做的東西，如：

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

和id將被傳遞到User組件。

Ex。 /user/bob和/user/jill都會呈現User組件，但在您的componentDidMount中，您現在可以從API中獲取正確的用戶信息。

隨着location.pathname該任務變得更復雜@palsrealm提到。但首先，location道具必須可供此方法使用。

還有其他的功能，你會失去，但這是我能想到的主要一個。您可以查看Route api documentation here。

編輯：至於爲什麼它是呈現不同的，我真的不能沒有更多的上下文回答。例如，是Route包裹在Switch部件像這樣：

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

Answer 2

在選項2<Route path={'/500'} component={Page500} /> 這裏要創建一個路由，其具有的/ 500的路徑並加載部件Page500。這意味着當用戶導航到路由中指定的路徑時，React-Router將呈現定義路由的組件。

在選項1，

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

父組件決定何時渲染Page500部件，基於它接收的location道具。這個location道具最終將來自Route或withRouter HOC。這相當於

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

這也可以寫成

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

所以總結起來，你只能做選項1，如果你從父組件的位置道具，你可以在應用程序的任何地方定義一個Route（選項2）。

編輯： 如果你把所有的航線一樣

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>); 

您正在運行多個路由渲染的風險，這可能是爲什麼你正在半頁選項2.渲染防止這種情況發生，並只有使第一個匹配的路由，您應該添加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>); 

更多Switch可以在https://reacttraining.com/react-router/web/api/Switch

找到