当我在路由中使用渲染时反应返回 Outlet 组件

Posted 2023-02-19

【中文标题】当我在路由中使用渲染时反应返回 Outlet 组件

【英文标题】：React return Outlet component when I use render in route

【发布时间】：2022-01-23 01:44:22

【问题描述】：

我正在尝试使用带有 props id 的 react-router，但它给了我以下信息：

Matched leaf route at location "/some-12" does not have an element. This means it will render an <Outlet /> with a null value by default resulting in an "empty" page.

我正在使用“react-router-dom”：“6”和“react”：“^17.0.2”

//example Routes
import Route, Routes  from "react-router-dom";
function App()
return(
   <>
   <Routes>
      <Route path="/about" element=<About />/>
      <Route exec=true path="/something" element=<Something/>/>
      <Route exact=true path="/something-:id"
             render=(props) => 
             <Some id=props.match.params.id />;
       />
      <Route path="/contact" element=<Contact />/>
   </Routes>
   </>```

//example Some
export default function Some( id ) 
    return(
       <>
          <p>Some with id: id
       </>
    )

我哪里做错了？

【参考方案1】：

在react-router-dom 版本 6 中，Route 组件渲染了 element 属性上的所有路由组件，并且不再有任何路由属性，即没有 history、location 或 match。

在element 属性上渲染Some 组件并使用useParams 挂钩访问id 路由匹配参数。如果path="/something-:id" 不起作用，请尝试将id 设为自己的路径段，即path="/something/:id"。

function App()
  return(
    <>
      <Routes>
        <Route path="/about" element=<About />/>
        <Route path="/something" element=<Something/>/>
        <Route path="/something-:id" element=<Some /> />
        <Route path="/contact" element=<Contact />/>
      </Routes>
    </>
  );

...

import  useParams  from 'react-router-dom';

export default function Some() 
  const  id  = useParams();
  return(
    <>
      <p>Some with id: id
    </>
  );

【讨论】：

感谢您的帮助

【参考方案2】：

可能是您在元素属性中错过了 return 语句。

<Route exact=true path="/something-:id"
             render=(props) => 
             return <Some id=props.match.params.id />;
       />
// or

<Route exact=true path="/something-:id"
             render=(props) => <Some id=props.match.params.id />;/>

注意：经过进一步研究，渲染道具已在 v6 中删除。您应该改用 element 并按照Drew Reese's answer 获取:id