基於路由參數加載不同的組件

Question

我想根據URL加載不同的組件。所以如果URL是www.abc.com/user/9，它應該加載UserComponent，如果URL是www.abc.com/user/uchit，它應該加載ProfileComponent。

我正在使用react-router@2.8.1進行路由。

<Route path="/user/:user_id" component={UserComponent} onEnter={fetchUser} /> 
<Route path="/user/:user_name" component={ProfileComponent} onEnter={fetchProfile} /> 

目前，上面的代碼只會指向userComponent。這個怎麼做？由於

Answer 1

呈現component該決定基於路由參數去渲染什麼，

<Route path="/user/:user_param" component={UserWrapper} onEnter={fetchUser} /> 

class UserWrapper extends React.Component{ 
    render(){ 
     if(isUserId(this.props.match.params.user_param)){ 
      return < UserComponent /> 
     } else if(isUserComponent(this.props.match.params.user_param)){ 
      return <ProfileComponent /> 
      } 
    } 
} 

，或者如果您使用的是反應路由器V4，

利用這一點，

<Route path="/user/:user_param" render={(props)=>{ 
    if(isUserID(props.match.parmas.user_param)){return <UserComponent />} 
    else if(isUserName(props.match.parmas.user_param)){ 
     return <ProfileComponent /> 
    } 
}} onEnter={fetchUser} /> 

Answer 2

使用exact

更改此

<Route path="/user/:user_id" component={UserComponent} onEnter={fetchUser} /> 

對此

<Route exact path="/user/:user_id" component={UserComponent} onEnter={fetchUser} /> 

我猜你仍然呈現UserComponent即使你使用其他的路徑，是因爲它共享相同的/user路徑

[編輯]

問題是因爲react-router沒有檢測到它是數字或字符也許你可以區分路徑？這樣

<Route path="/user/id/:user_id" component={UserComponent} onEnter={fetchUser} /> 
<Route path="/user/name/:user_name" component={ProfileComponent} onEnter={fetchProfile} /> 

[更新]

我的解決方法是檢查PARAMS型

由於您使用路由器的反應，你v2.8.1可能宣佈一個部件的包裝材料來決定哪些組件應呈現。

function CheckUserComponent(props) { 
    if (!Number.isNaN(parseFloat(props.match.params.user)) && Number.isFinite(props.match.params.user)) { 
    return <UserComponent /> 
    } else { 
    return <ProfileComponent /> 
    } 
} 

<Route path="/user/:user" component={CheckUserComponent} onEnter={fetchUser} />