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

Question

使用基于类的组件，我可以将状态传递给由 props 渲染的组件，方法是:

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

但是，现在我正在使用 react Hook ，并且我的状态定义为:

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

现在路线忽略了这个 Prop 。我确实读过一些关于人们使用渲染之类的东西而不是组件的内容。但是这所需的精力和代码量对我来说看起来太老套或太多了？我的意思是引入钩子(Hook)是为了更好的代码。现在一个简单的“someprop={someprop}”必须被代码块替换？

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

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

预先感谢您的宝贵时间!

更新答案

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

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

Answer 1

这与钩子(Hook)无关，它基于 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 不会导致不必要的重新渲染。您可能会想到的是，尝试使用与组件属性相同的渲染属性会导致问题:

来自 React Router 的 documentation :

When you use component (instead of render or children, below) the router uses React.createElement to create a new React element from the given component. That means if you provide an inline function to the component prop, you would create a new component every render. This results in the existing component unmounting and the new component mounting instead of just updating the existing component. When using an inline function for inline rendering, use the render or the children prop (below).

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

Reactjs - `component` vs `render` in Route

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

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

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

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

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

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