Load different component based on route params

Question

I want to load different component based on URL. So if URL is www.abc.com/user/9 it should load UserComponent and if URL is www.abc.com/user/uchit it should load ProfileComponent.

I am using react-router@2.8.1 for routing.

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

Currently, above code will point to userComponent only. How to do this? Thanks

Hana Alaydrus · Answer 1 · 2017-08-09T06:43:24.937

2

Use exact

Change this

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

To this

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

I guess you still render UserComponent even if you use other path is because it share the same /user path

[EDIT]

The problem is because react-router didn't detect either it's a number or character maybe you could differentiate the path? like this

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

[UPDATE]

My solution is to check the params type

Since you use react router v2.8.1 you might declare a component wrapper to decide which component should render.

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

edited Aug 09 '17 at 06:43

answered Aug 09 '17 at 05:24

Hana Alaydrus

2,225
16
19

Not working ... /user/userName is still pointing to UserComponent – Uchit Kumar Aug 09 '17 at 05:35
@UchitKumar what if you differentiate the path? – Hana Alaydrus Aug 09 '17 at 05:39
No, I can't do that.. if that was possible .. I would have done that. is there any way to validate string and integer then load different component. – Uchit Kumar Aug 09 '17 at 06:05
@UchitKumar I just update the answer. My solution is to check the params type. Since params always in string so I use `!Number.isNaN()&& Number.isFinite()` to check if its a number. I got that way from here https://stackoverflow.com/questions/18082/validate-decimal-numbers-in-javascript-isnumeric/1830844#1830844 – Hana Alaydrus Aug 09 '17 at 06:48

score 1 · Accepted Answer · answered Aug 09 '17 at 06:06

Render a component that decides what to render based on the route param,

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

or if you are using react-router v4,

use this,

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

what is the use of {fetchUser} could you please give me code — Anil, Oct 25 '17 at 12:32

Load different component based on route params

2 Answers2