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

使用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} />

<强> [UPDATE]

我的解决方案是检查参数类型

由于您使用react router 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} />

Answer 2

渲染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 />
          }
    }
}

或者如果您使用的是react-router 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} />

根据路径参数加载不同的组件

2 个答案: