CODEWITHSUNDEEP
reactjsroutes
Abhigyan
Abhigyan

Reputation: 385

what is the difference between element attribute and component attribute in React <Route><Route/> tag

Case 1: when using element attribute within Route tag

const App = () => {
  return(
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/album" element={<Album />} />
    </Routes>
  )
};

Case 2: when using component attribute within Route tag

const App = () => {
  return(
    <Routes>
      <Route path="/" component={<Home />} />
      <Route path="/album" component={<Album />} />
    </Routes>
  )
};

Upvotes: 5

Views: 5024

Answers (4)

Cansoy
Cansoy

Reputation: 1

The main diffrences between element and component attributes; First:It will be easier to make the switch to React Router v6 if you upgrade to v5.1 Second:element attribute gives oppurtunity to use props but in component attribute you cant.

<Routes>
 <Route path='/home' element={<Home prop={"somedata"}/>}/>
 <Route path='/about' Component={About} >
</Routes>

Upvotes: 0

mansi bavishi
mansi bavishi

Reputation: 3

Case 1: when using element attribute within Route tag, you have to specify your component name within tag.ex:(element={<.../>}).

const App = () => {
  return(
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/album" element={<Album />} />
    </Routes>
  )
};

Case 2: when using component attribute within Route tag, you can simply write your component name in curly braces doesn't need to add tag.ex:(component={...}).

const App = () => {
  return(
    <Routes>
      <Route path="/" component={Home} />
      <Route path="/album" component={Album} />
    </Routes>
  )
};

Upvotes: 0

gsan
gsan

Reputation: 603

You are probably using a version equal to or greater than v5.1

According to migration documentation, you can use element safely everywhere.

"It will be easier to make the switch to React Router v6 if you upgrade to v5.1 first. In v5.1, we released an enhancement to the handling of elements that will help smooth the transition to v6. Instead of using and props, just use regular element everywhere and use hooks to access the router's internal state."

Upvotes: 2

Yasser hennawi
Yasser hennawi

Reputation: 815

The current documentation of react-router says all there options basically does the same thing, but they leave them in order to Support older versions, but you can only use one of those.

react-router-documentation

Upvotes: 2

Related Questions