React 路由器 url 参数未存储在 props 中

Question

我有一条简单的路线：

import Foo from './Foo';
import Bar from './Bar';

const Routes = (
    <ReactRouter.Route handler={App} path="/">
        <ReactRouter.Route path="foo" handler={Foo} />
        <ReactRouter.Route path="foo/:bar" handler={Bar} />
    </ReactRouter.Route>
);

和组件：

const Foo = React.createClass({
...
})

...

const Bar = React.createClass({
    componentDidMount() {
        console.log('props', this.props.params);
    },
    render() {
        console.log(this.props.params);
        return (
            <div>Bar Component</div>
        );
    }
});

export default Bar;

当我导航到 /foo 时，我得到了我的 Foo 组件。当我导航到 /foo/something 时，我得到了我的 Bar 组件，但我的 props 对象是空的。我假设我应该在那里有 this.props.params 和 bar = something。我一直在关注 http://rackt.github.io/react-router/#Router Overview and also Nested details route with react-router not rendering，但运气不佳。

Answer 1

因为你使用的是 RR 0.12.4，试试这个：

const Bar = React.createClass({
    mixins: [ ReactRouter.State ],
    render() {
        console.log(this.getParams().bar);
        return (
            <div>Bar Component</div>
        );
    }
});

Answer 2

我设法修复了它。

const Bar = React.createClass({
    contextTypes: {
        'router': React.PropTypes.func
    },
    render() {
        const router = this.context.router;
        const bar = router.getCurrentParams().bar;
        return (
            <div>{bar}</div>
        );
    }
});

Answer 3

react router 13.3 的建议是使用 mixins 而不是使用 context。他们还说要跳过 13.2。参见 https://github.com/rackt/react-router/blob/master/UPGRADE_GUIDE.md

React 路由器 url 参数未存储在 props 中

React router url params not stored in props

reactjs

react-router