In my React code I have these 2 files in App.js and Users.js. By using Routes just for fun and experimenting to render some random text, I have 3 routes that have the same path and components but shouldn't the app have render it 3 times? Why is it that when I start my App my user text only has user text only once? Should it not render the text 3 times?

Also what is the diff between <Route path='/' element={<Users />}></Route> and <Route path='/' Component={Users}></Route>? Is there an advantage over the other cause I tried both and both render the same text. What is the diff?

I'm using React-Router-DOM v7 and React v18

In my App.js I have this code

In my Users code I have this

In my React code I have these 2 files in App.js and Users.js. By using Routes just for fun and experimenting to render some random text, I have 3 routes that have the same path and components but shouldn't the app have render it 3 times? Why is it that when I start my App my user text only has user text only once? Should it not render the text 3 times?

Also what is the diff between <Route path='/' element={<Users />}></Route> and <Route path='/' Component={Users}></Route>? Is there an advantage over the other cause I tried both and both render the same text. What is the diff?

I'm using React-Router-DOM v7 and React v18

In my App.js I have this code

In my Users code I have this

• javascript
• reactjs
• react-router
• react-router-dom

Share Improve this question Follow edited Mar 4 at 16:06 Drew Reese 204k1818 gold badges245245 silver badges273273 bronze badges asked Mar 4 at 13:36 Oh OhOh Oh 4544 bronze badges 1

• Please edit to post your code as a properly formatted and readable code snippet instead of an image. Images are less accessible, cannot be copy/pasted from, and can be more difficult to read for some readers. – Drew Reese Commented Mar 4 at 16:10

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

I have 3 routes that have the same path and components but shouldn't the app have render it 3 times? Why is it that when I start my App my user text only has user text only once? Should it not render the text 3 times?

No, only one route per unique URL path can be matched and rendered. I don't know if the React-Router team defines which will be the one that is matched and rendered, but chances are it will be the first declared route.

If you wanted the Users component to be rendered three times you'd do this manually on a single route.

Example:

<Route
  path="/"
  element={(
    <>
      <Users />
      <Users />
      <Users />
    </>

  )}
/>

Also what is the diff between <Route path='/' element={<Users />} /> and <Route path='/' Component={Users} />? Is there an advantage over the other cause I tried both and both render the same text. What [is] the diff?

For this I'll refer you to the V6 docs:

Route element/Component

The React Element/Component to render when the route matches the URL.

If you want to create the React Element, use element:

<Route path="/for-sale" element={<Properties />} />

Otherwise use Component and React Router will create the React Element for you:

<Route path="/for-sale" Component={Properties} />

You should only opt into the Component API for data routes via RouterProvider. Using this API on a <Route> inside <Routes> will de-optimize React's ability to reuse the created element across renders.

Note the last section that informs you that using Component in a non-Data Router within a Routes component will de-optimize React performance since the Users component won't be persisted across renders, i.e. it will be re-created each render cycle.

The advantage is performance, keeping instantiated/mounted React components alive and mounted, even when they are rendered on different routes.

Consider the following two routes:

<Route path="foo" element={<Foobar />} />
<Route path="bar" element={<Foobar />} />

Navigating from "/foo" to "/bar" and vice-versa will keep the Foobar component mounted. Using the Component prop this would not happen. The Component prop should only be used with Data Routers, i.e. routers created from createBrowserRouter, createMemoryRouter, etc.