在 React Router 中传递附加参数 [英] Passing additional parameters in React Router

问题描述

如何将额外的参数传递给我要转换到的组件.

我的 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')}/></路线>);module.exports = 路由；

在我的 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 发生的方式一样)

我该怎么做?

解决方案

你可以尝试像这样改变你的路由结构:

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')}/></路线></路线>);

然后在你的 authorList 页面中你可以做

<代码>...渲染验证(){如果(this.props.children === null){返回(....您的默认作者列表)} 别的 {return React.cloneElement(this.props.children || 
, {myExtraParams: myExtraParams});}}使成为() {<div>{this.renderAuth()}
}showAuthorDetails(authorId) {hashHistory.push(`/authors/author/${authorId});}...

然后你应该可以在你的authorsDetail页面访问this.props.myExtraParams

How can I pass additional parametrs to the component that I am transitioning to.

I have my routes.js as follows. I have declared two paths one for authorList and another for a particluar author's details.

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;

And in my authorList Page there is function as follows.

showAuthorDetails(authorId) {            

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

Now In my AuthorDetail page I can get authorId by doing

this.props.params.authorId

But I also want to pass myExtraParams as an object but don't want to declare and pass it in the url. I want to somehow access myExtraParams in the new component, perhaps say like by doing

this.props.params.myExtraParams

should give mt the object. (Like the way it happens in Angular UI router by using stateParams)

How can I do that?

解决方案

you could try and change the structure of your routes a bit like so:

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>
);

Then in your authorList Page you could do

...
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});     
}
...

You should then be able to access this.props.myExtraParams in your authorsDetail page

这篇关于在 React Router 中传递附加参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！