在 React Router v6 中将 Props 传递到 Outlet

Question

我无法设法将 props 传递到新的 React-router v6 中的 Outlet 组件。我尝试了简单的解决方案：

render() {
  return (
    <Outlet name="My name" />
  );
}

这会正确渲染子组件，但是没有任何道具传递给子组件。React 团队（或其他任何人）提供的示例都没有显示带有 props 的 Outlet，所以我担心它实际上不是一个东西。是否有其他方法我没有找到或者我错误地使用了输出组件？

编辑：似乎没有直接的方法来传递道具，请参阅下面的答案。

Answer 1

您可以使用 插座上下文来做到这一点

Answer 2

当使用功能组件时，在父组件中声明名称，如下所示。

function Parent() {
  const const name='Your name'
  return <Outlet context={[name]} />;
}

然后在子组件中执行此操作

//import this
import { useOutletContext } from "react-router-dom";

function Child() {


const [name] = useOutletContext();



return <p >{name}</p>;
}

Answer 3

现在可以使用 context 属性（从版本 6.1.0 开始）

<Outlet context={}/>

github问题

React 路由器插座文档

Answer 4

这里的另一种选择是使用Context API将父视图中的 props 共享到子视图。

const Context = React.createContext({})

function ParentView () {
  const outlet = useOutlet()
  return (
    <Context.Provider value={{ foo: 'bar' }}>
      <h1>Parent View</h1>
      {outlet}
    </Context.Provider>
  )
}

function ChildView () {
  const props = React.useContext(Context)
  return (
    <div>child view {props.foo}</div>
  )
}

另一个选项（未经测试）可能是使用React.cloneElement克隆出口并向其添加道具。