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

CodePudding user response：

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.

CodePudding user response：

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

CodePudding user response：

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