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

Question

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

示例 根路径:/ 列表数据:猫、狗、大象

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

Answer 1

经过一番讨论之后。弄清楚你想做什么。

您需要在react-router中定义一条新路由，您可以将其用于此历史记录更改..如下所示:

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

在您的组件中，您可以通过 this.props.params.name 访问此“名称”

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

<小时/>

注意:如果您继续使用 v2...您应该让您的操作返回一个 promise ，以便您可以在组件中链接事件。又名:

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("/"); 
    })
}