Question

我有一条简单的路线：

    <h1>display</h1>
    <div>
        <div class="active">Display</div>
        <div class="inactive">Social</div>
        <div class="inactive">Email</div> 
    </div>

和组件：

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。{ 我正在关注http://rackt.github.io/react-router/#Router概述以及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

反应路由器13.3的建议是使用mixins而不使用上下文。他们还说要跳过13.2。见https://github.com/rackt/react-router/blob/master/UPGRADE_GUIDE.md

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

3 个答案: