react＆lt; route＆gt; route/＆gt; react＆lt; route/gt; react＆lt; react＆gt; exement属性和组件属性之间有什么区别标签

Question

案例1：在路由标签

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

案例2中使用元素属性时：在路由中使用组件属性时

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

Answer 1

React-Router的当前文档说，所有选项基本上都在做同样的事情，但是它们会留下它们以支持支持旧版本，但是您只能使用其中之一。

Answer 2

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

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

“如果您首先升级到v5.1。在v5.1中，我们对v5.1进行了反应路由器v6会更容易。我们对处理元素的处理释放了增强功能，这些元素将有助于平滑过渡到v6。而不是使用和道具，只需在各处使用常规元素即可使用钩子访问路由器的内部状态。“

Answer 3

情况1：在路由标签中使用元素属性时，您必须在tag.ex中指定组件名称：（ element = {＆lt; .../＆gt;}）。

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

情况2：在路由标签中使用组件属性时，您可以在卷曲括号中写下组件名称，而不需要添加tag.ex.ex ：（ component = {...}）。

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

Answer 4

元素和组件属性之间的主要衍射；
首先：如果您升级到v5.1，则更容易地进行反应路由器V6。
第二：元素属性给出了使用道具的oppurtunity，但是在组件属性中，您不能使用。

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