更新答案

Question

使用基于类的组件，我可以这样说：将状态传递给props渲染的组件：

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

但是，现在我正在使用react挂钩，并且我将状态定义为：

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'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>

编辑海报问题：

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

据我所知，渲染道具不会引起不必要的重新渲染。您可能会想到的是，尝试与带有组件prop的render prop一样导致问题：

从React Router的documentation：

当您使用组件（而不是下面的渲染器或子代）时，路由器使用React.createElement从中创建一个新的React元素给定的组件。也就是说，如果您向组件属性，您将在每个渲染中创建一个新组件。这个导致现有组件的卸载和新组件的安装安装而不只是更新现有组件。使用时用于内联渲染的内联函数，请使用render或儿童道具（如下）。

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传递的道具（匹配基于组件层次结构中第一个匹配的Route）。

withRouter并没有太多要说的东西，我有一个使用方法的示例，它将这三个道具添加到您的组件中。

如果您正在使用功能组件，我个人建议使用React Router提供的hooks，因为它们不需要高阶组件。像其他任何挂钩一样，它们可以更容易地与任何自定义挂钩或功能组件组成。

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

Answer 2

您尝试过吗？

if (some condition) { return new ResponseEntity<List<ObjectA>>(service.getAllObjectA(bar, foo.orElse(""), HttpStatus.OK); } else if (...) { return new ResponseEntity<List<ObjectB>>(service.getAllObjectB(dove, foo.orElse(""), HttpStatus.OK); }

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

更新答案

2 个答案: