React <Route><Route/>标记中元素属性、组件属性和属性之间有什么区别？

Question

案例1：当在路由标签内使用元素属性时

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

案例2：在Route标签中使用component属性时

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

- pryansh

Answer 1

React-Router的当前文档称，它们的所有选项基本上都是做同样的事情，但为了支持旧版本而将它们保留下来，但你只能使用其中一个。

- Yasser hennawi

---

这仅适用于 v5 文档，v6 文档严格使用 "element" 代替这三个词。 - gsan

正确的，在v6中，所有内容都迁移到了元素属性。谢谢。 - Yasser hennawi

Answer 2

您可能正在使用版本等于或大于v5.1

根据迁移文档，您可以在任何地方安全地使用element。

"如果您首先升级到v5.1，将更容易切换到React Router v6。在v5.1中，我们发布了一个增强版的处理元素的方式，这将有助于平稳过渡到v6。不要使用<Link>和<NavLink>属性，而是在任何地方使用常规<a>元素，并使用hooks访问路由器的内部状态。"

- gsan

Answer 3

情况1：在Route标签内使用元素属性时，必须在标签内指定组件名称。例如：(element={<.../>})。

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

案例2：当在Route标签中使用组件属性时，您可以在花括号中简单地写入组件名称，而不需要添加标签。例如：（component={...}）。

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

- mansi bavishi

Answer 4

元素属性和组件属性之间的主要区别是： 第一：如果您升级到v5.1，将更容易切换到React Router v6。 第二：元素属性提供了使用props的机会，但在组件属性中则不行。

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

- Cansoy