以编程方式导航到不同的路线

Question

我有一个用例，其中我有一个类似于 vanilla html select 的组件内的元素列表。我想，当用户点击列表中的任何元素时，路线应该改变。我可以在定义路由时使用一些正则表达式，并通过使用反应路由器的一些 API 方法更改路由，select 的 onValueChange 事件吗？

例子根路径：/ 列表数据：猫、狗、大象

当有人点击 Cat 时，我希望他导航到 /Cat，类似地 /Dog，/Elephant。

Answer 1

所以在谈了一会儿之后。弄清楚你想做什么。

您需要在 react-router 中定义一个新路由，您可以将其用于此历史记录更改。像这样：

<Route exact path="/:name" component={SomeComponent} />

在您的组件中，您可以通过 this.props.params.name

访问此 "name"

您也可以在更新此路由之前调用一个操作来更新商店

注意：如果您继续使用 v2...您应该让您的操作 return 成为一个承诺，这样您就可以将事件链接到您的组件中。又名：

onChange={this.handleChange}

handleChange = (value) => { // assuming you have the value here.. it may be e is the function param and you get the value as e.target.value
    this.props.saveSelectedAnimal(value).then( () => {
        this.props.history.push("/"); 
    })
}

以编程方式导航到不同的路线

Navigate to a different route programmatically

reactjs

react-router

react-redux

react-router-v4

react-router-redux