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

user_17814714 0
Viewed 194

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>
  )
};
reactjs routes
3 Answers

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

user_74848420

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."

user_120628310

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>
  )
};
user_191006530
Related