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

Question

使用基于 class 的组件，我可以将 state 传递给由道具渲染的组件，方法是：

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

但是，现在我正在使用反应钩子，并且我的 state 定义为：

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

这与钩子无关，它基于 React Router Dom 的工作方式。

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

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

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

<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 的 文档：

当你使用组件（而不是渲染或子，下面）时，路由器使用 React.createElement 从给定组件创建一个新的 React 元素。 这意味着如果您为组件属性提供内联 function，您将在每次渲染时创建一个新组件。 这会导致现有组件卸载和新组件安装，而不是仅仅更新现有组件。 当使用内联 function 进行内联渲染时，请使用 render 或 children 道具（如下）。

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

Reactjs - 路线中的“组件”与“渲染”

2. 我必须问，你能发布一些关于你所说的'withRouter'的初学者友好参考吗？

同样，我必须让你参考 React Router 的文档。 它是有关 React Router 的最佳信息来源之一，并且会保持最新状态。

withRouter 的主要要点是它是一个高阶组件，基本上会给你一个新版本的组件，它总是传入match 、 history和location道具（匹配基于组件层次结构中第一个匹配的 Route ） .

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

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

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

Answer 2

你试过这个吗？

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