使用react-router-dom v6时如何正确渲染路由组件的props

你在react-router-dom v6中配置路由时，对Route组件的element属性用法错误，是导致props无法传递、组件不渲染的核心原因：

• v6版本的element属性要求直接传入React JSX节点，不支持传入渲染函数，你写的element={() => { <Component /> }}形式不会被路由解析执行，最终返回空值
• 你写的箭头函数内部没有写return关键字，就算路由执行这个函数，拿到的返回值也是undefined，无法渲染组件
• v6版本路由默认就是精确匹配规则，手动加的exact属性是无效冗余代码，可以直接删除
  另外你的代码里agetContactId存在明显拼写错误，常规命名应为getContactId，可以根据实际业务方法名修正。

return (
  <div className="ui container">
    <Router>
      <Header />
      <Routes>
        <Route
          path="/"
          element={
            <ContactList
              contacts={contacts}
              getContactId={removeContactHandler}
            />
          }
        />
        <Route path="/add" element={<AddContact />} />
      </Routes>
    </Router>
  </div>
);

• 给路由对应组件传递自定义props时，直接在element内的JSX节点上绑定属性即可，和普通父子组件传参没有区别
• 如果需要在路由跳转前做权限校验、数据预加载等逻辑，不要在element里写内联函数，应该封装独立的路由包装组件实现逻辑
• v6版本只有嵌套子路由会按照路径前缀做匹配，一级路由默认全路径精确匹配，不需要额外加匹配规则属性

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