将 useState 状态传递给 React 中的路由器组件

Question

使用基于类的组件，我可以通过以下方式将状态传递给由 props 呈现的组件：

<Route path='/someroute' component={SomeComponent} someprop={someprop} />

但是，现在我正在使用反应钩子，我的状态定义为：

const [myProjects, setMyProjects] = useState([
     {projectName: Some project, id: 1},
     {projectName: Some project, id: 2},
]);

现在路线忽略了这个道具。我确实读过一些关于人们使用渲染而不是组件的东西。但是这花费的精力和代码量对我来说看起来太老套了还是太多了？我的意思是为了更好的代码引入了钩子。现在一个简单的 'someprop={someprop}' 必须被代码块替换？

我还阅读了一些关于路由器 v5 的一些新内容，但我找不到可靠且干净的方式来传递道具。

有人可以就这件事教育我吗？

提前感谢您的时间！

更新答案

如果您在谷歌搜索后来到这里，这里有一个带有解决方案的沙盒！这基于所选的解决方案/答案。其他观众也可能会查看此内容，以了解我面临的问题。也许有人有其他信息。我还在学习 React，天哪，这对我来说是一个很大的学习曲线哈哈

https://codesandbox.io/s/admiring-diffie-9kfgx?file=/src/App.js

Answer 1

你试过吗？

<Route path="/someroute" render={(props) => <SomeComponent {...props} someprop={someprop} />} />

Answer 2

这与钩子与否无关，它基于 React Router Dom 的工作原理。

如果您不需要 match、location 或 history 道具，那么您可以简化您的组件；

<Route path='/someroute'>
   <SomeComponent someprop={someprop}/>
</Route>

如果您确实需要这些，那么您可以在您的子组件中使用React Router's hooks 之一来获取它们，您可以使用render prop of the route。你绝对不想用component prop 尝试这个，因为这会在每次渲染中创建一个新组件。

<Route path='/someroute' render={routeProps=><SomeComponent {...routeProps} someprop={someprop}/>}  />

另一种方法是使用withRouter高阶组件：

//outside of the parent component
const SomeComponentWithRouter = withRouter(SomeComponent);

//In the render function:

<Route path='/someroute'>
   <SomeComponentWithRouter someprop={someprop}/>
</Route>

编辑海报问题：

1. 您显示的渲染标签，是否会导致不必要的重新渲染？一世 阅读相关内容。

据我所知，渲染道具不会导致不必要的重新渲染。您可能会想到的是，尝试使用组件 prop 与 render prop 相同会导致问题：

来自 React Router 的 documentation：

当你使用组件（而不是渲染或子，下面） 路由器使用 React.createElement 从 给定的组件。这意味着如果您向 组件道具，您将在每次渲染时创建一个新组件。这 导致现有组件卸载和新组件 安装而不是仅仅更新现有组件。使用时 用于内联渲染的内联函数，使用 render 或 儿童道具（下）。

https://tylermcginnis.com/react-router-pass-props-to-components/

Reactjs - `component` vs `render` in Route

1. 我必须问一下，您能否发布一些适合初学者的参考资料 关于你所说的“withRouter”？

再次，我必须将您推荐给 React Router 的 documentation。它是有关 React Router 的最佳信息来源之一，并且会保持最新状态。

withRouter 的主要要点是它是一个 higher order component，基本上会给你一个新版本的组件，它总是有 match、history 和 location 传入的属性（匹配基于第一个匹配的 Route 向上组件层次结构）。

关于 withRouter 没什么好说的，我有一个如何使用它的示例，它会将这 3 个道具添加到您的组件中。

如果您使用功能组件，我个人建议使用 React Router 提供的hooks，因为它们不需要更高阶的组件。与任何其他钩子一样，它们可以更轻松地与任何自定义钩子或函数组件组合。

https://css-tricks.com/the-hooks-of-react-router/