Question

目前，在我的route.tsx中我定义了以下内容：

<Route exact={true} path="/test/:id" component={Test} />

Test组件实际上接受了一个名为id的道具。

<Test id="23232"/>

您如何定义访问＆＃34;：id＆＃34;的路线？所以它可以传入而不必访问Test组件中的param。

像

这样的东西

<Route exact={true} path="/test/:id" component={(props)=>{ <Test id={props.match.params.id} />}} />

这可能吗？

谢谢，德里克

Answer 1

是的，这是可能的。

但是，您只需稍微调整语法即可删除额外的大括号：

<Route exact={ true } path="/test/:id" component={ (props) => <Test id={ props.match.params.id } /> } />

您可能还想使用渲染而不是组件：

<Route exact={ true } path="/test/:id" render={ (props) => <Test id={ props.match.params.id } /> } />

来自文档：

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

https://reacttraining.com/react-router/web/api/Route/component

在路由定义中实例化组件时如何引用路径中的参数？到达路由器v4

1 个答案: