CODEWITHSUNDEEP
reactjsreact-router
ZPPP
ZPPP

Reputation: 1578

Duplicate component In `react-router`?

What I have

      <Route path="profile" component={ProfilePage} >
        <Route path="edit(/:profileId)" component={EditProfile} />
        <Route path="add(/:profileId)" component={AddProfile} />
        <Route path="view/:profileId" component={ProfilePage}/>
      </Route>

My problem if my path view, I see two profilePage components

Upvotes: 2

Views: 3511

Answers (2)

Harvolev
Harvolev

Reputation: 122

I had this same issue when wiring up Redux to my React-Router app.

Since you didn't put your whole routing in I have to assume you're doing something like the default suggested routing in the React-Router tutorial it would look like this:

<Router history={browserHistory}>
    <Route path="/" component={App} >
        <IndexRoute component={IndexPage} />
        <Route path="profile" component={ProfilePage} >
            <Route path="edit(/:profileId)" component={EditProfile} />
            <Route path="add(/:profileId)" component={AddProfile} />
            <Route path="view/:profileId" component={ProfilePage}/>
        </Route>
    </Route>
<Router />

If you're using a similar structure and are using React.cloneElement() in the container component 'App' like this:

{React.cloneElement(this.props.children, this.props)}

You'll have to reduce the nesting as it's cloning the 'ProfilePage' as a child for all the children as well. Try changing it to this: 

<Router history={browserHistory}>
    <Route path="/" component={App} >
        <IndexRoute component={IndexPage} />
    </Route>
    <Route path="/profile" component={ProfilePage} >
        <Route path="edit(/:profileId)" component={EditProfile} />
        <Route path="add(/:profileId)" component={AddProfile} />
        <Route path="view/:profileId" component={ProfilePage}/>
    </Route>
<Router />

Arguably you could eliminate the 'IndexPage' component if you don't have further route children off 'App'.

...After Typing this out I saw your little image link with your modal. I believe this is still your problem. Deeply nesting your routes with a parent using React.cloneElement is likely to cause this. You might be able to use createElement to pass props down instead of cloneElement to avoid reference issues. Have a look at that here: Create Element another choice is createComponent as well in the docs to map props. I haven't tried that yet myself though.

Upvotes: 1

Jack
Jack

Reputation: 21183

You probably want IndexRoute. Try something like this:

<Route path="profile">
  <IndexRoute component={ProfilePath} />
  <Route path="edit(/:profileId)" component={EditProfile} />
  <Route path="add(/:profileId)" component={AddProfile} />
  <Route path="view/:profileId" component={ProfilePage}/>
 </Route>

Upvotes: 0

Related Questions