React Router v4 rendering component twice

user_816213 0
Viewed 6866

Here is my Router Implementation

<BrowserRouter>
  <div>
    <Route exact path="/" component={ProfilesIndex} />
    <Route exact path="/profiles" component={ProfilesIndex} />
    <Route exact path="/profiles/new" component={ProfileEditor} />
    <Route exact path="/profiles/:id" component={ProfileEditor} />
  </div>
</BrowserRouter>

When I am browsing to /profiles/new path, it is rendering the ProfileEditor component twice. For every other route, it is working fine.

Can someone suggest how to fix this problem ?

react-router-v4 reactjs
3 Answers

I found the answer after browsing into multiple sections in Router Docs. Problem was it was matching multiple routes

When user opens /profiles/new it matches two routes

  1. /routes/new
  2. /routes/:id

Because :id is like a wildcard * and it also matches new word so both routes get matched and hence the component gets rendered twice.

The solution is to wrap the routes with Switch if you do not want to match multiple routes.

<BrowserRouter>
  <Switch>
    <Route exact path="/" component={ProfilesIndex} />
    <Route exact path="/profiles" component={ProfilesIndex} />
    <Route exact path="/profiles/new" component={ProfileEditor} />
    <Route exact path="/profiles/:id" component={ProfileEditor} />
  </Switch>
</BrowserRouter>
user_8162130

For anyone coming here from v6+

exact prop no longer exists, the paths are exact by default if they aren't appended a wildcard *

However I was still getting a double render. I ran a prod build and checked and the double render is gone so probably nothing to worry about - sometimes hooks run twice in development mode (I guess that's what's happening internally)

user_4140620

for me, this is because of React.StrictNode which is wrapped arround App component.

it intentionally double render components (only in development) to enforce you, not use side effects on some of your component's lifecycle events.

the reason behind that is documented here

user_104011240
Related