在 React Router 中传递附加参数

IT技术 reactjs react-router
2021-05-16 13:29:06

如何将附加参数传递给我要转换到的组件。

我的routes.js如下。我已经声明了两条路径，一个用于 authorList，另一个用于特定作者的详细信息。

var routes = (
    <Route path="/" component={require('./components/main')}>        
        <Route path="authors" component={require('./components/authors/authorPage')}/>
        <Route path="authors/:authorId" component={require('./components/authors/AuthorDetails')}/>
    </Route>
);

module.exports = routes;

在我的 authorList 页面中有如下功能。

showAuthorDetails(authorId) {            

    var myExtraParams = { key1 : val1, key2 : val2};
    hashHistory.push(`/authors/${authorId});     
}

现在在我的 AuthorDetail 页面中，我可以通过执行获得 authorId

this.props.params.authorId

但我也想将 myExtraParams 作为对象传递，但不想在 url 中声明和传递它。我想以某种方式访问​​新组件中的 myExtraParams，也许说像这样

this.props.params.myExtraParams

应该给 mt 对象。（就像它在 Angular UI 路由器中使用 stateParams 发生的方式一样）

我怎样才能做到这一点？

2个回答

您可以尝试像这样更改路线的结构：

var routes = (
    <Route path="/" component={require('./components/main')}>        
        <Route path="authors" component={require('./components/authors/authorPage')}>
            <Route path="author/:authorId" component={require('./components/authors/AuthorDetails')}/>
        </Route>
    </Route>
);

然后在你的 authorList Page 你可以做

...
renderAuth() {
    if (this.props.children === null) {
        return(
            ....your default authorList
        )
    } else {
        return React.cloneElement(this.props.children || <div />, {myExtraParams: myExtraParams});
    }
}

render() {
    <div>
        {this.renderAuth()}
    </div>
}

showAuthorDetails(authorId) {            
    hashHistory.push(`/authors/author/${authorId});     
}
...

然后，您应该能够在您的authorsDetail 页面中访问 this.props.myExtraParams

我正在看这个问题。也许我迟到了，你已经有了解决方案，但如果没有，那么你可以简单地通过

router.push({
  pathname: '/some-route',
  search: '?param=123',
  state: {
    additionalParam: 'value',
  },
})}

而在接收组件方面，你会得到它 

this.props.location.state.additionalParam

我希望它有帮助。如果有任何进一步的帮助，请随时告诉我。

谢谢

其它你可能感兴趣的问题
上一篇React createContext/useContext 在页面之间不存在 下一篇创建 React App 添加 CORS 标头