React路由：如何修复非布尔属性exact收到"true"的警告？

问题原因 #

你当前使用的是React Router v6版本，这个版本里Route组件已经移除了exact属性，而且你把exact设为字符串'true'，React会将其识别为DOM元素的非布尔属性，因此触发了警告。另外，v6里Route组件也不再支持component属性，需要改用element属性。

具体解决步骤 #

• 删掉所有Route标签上的exact='true'：v6的Routes组件默认会对路由路径做精准匹配，无需手动添加exact。
• 将Route的component属性替换为element属性：这是v6规定的路由组件挂载方式。

修改后的完整代码 #

return (
  <Router>
    <Navbar />
    <div className="flex">
      <Sidebar />
      <div className="content ">
        <Routes>
          <Route path='/' element={<Home />}/>
          <Route path='StartWorkflow' element={<StartWorkflow />}/>
          <Route path='Myform' element={<Myform />}/>
          <Route path='Mytask' element={<Mytask />}/>
          <Route path='Workflowlist' element={<Workflowlist />}/>
        </Routes>
      </div>
    </div>
    <Footer/> 
  </Router>
);
}

内容的提问来源于stack exchange，提问作者No04 No04