Question

开始学习react-router，我设法创建了一些显示在不同URL上的页面（组件）。第一页是菜单页面，其中包含单击以链接到其他页面的链接。阅读一些在线教程后，代码很简单。 URL匹配时，组件将显示：

<Route path='/CheckIn' component={ScreenCheckIn} />

现在，我想向路由过程添加一些变量。当选择一个组件时，还应该设置一个变量，例如在页面上方的适当标题。我尝试过：

<Route path='/Search' render={(props) => { 
    this.state.screentitle = 'Zoeken'
    return (<ScreenSearch barcode={this.state.barcode} {...props} />) 
}} />

但这不起作用。我正在阅读history，但这似乎很复杂且过大。我只需要在应用程序的另一部分中显示当前URL。将此类URL转换为适当的标题将很容易。

然后我也需要传递其他数据。例如。我想要一个可以被Route选中的所有页面通用的输入字段，并将输入值作为属性传递给选定的组件。现在，可以使用上述方法。

如果我可以根据匹配的路线设置变量，那么我也可以显示或隐藏公共输入字段，因为菜单页面不需要输入字段，例如：

{this.state.screentitle == 'Menu' ?
    null
    :
    <input .... />
}

但是Route API中还有很多其他组件，它们之间存在细微的差异，这使它们都变得有些混乱。

是否有一种简单的方法来Route到一个组件并设置一些变量？

如何使用React Route

0 个答案: