React Router：無法將道具傳遞給activeRouteHandler

Question

我試圖將一些道具傳遞給我的處理組件，但是react-router卻沒有這樣做。

var Objects = React.createClass({
    getInitialState: function() {
        return {
            selected: "All"
        }
    },
    select: function(opt) {
        this.setState({
            selected: opt
        });
    },
    render: function() {

        return (
            <div>
                <LeftNav select={this.select} />
                <this.props.activeRouteHandler selected={this.state.selected} />
            </div>
        );
    }
});



var routes = (
    <Routes>
        <DefaultRoute name="objects" handler={objecctHandler}/>
    </Routes>
);

路由器加載正常，因為我現在可以在網址中看到“＃/”。 Left導航可以很好地渲染並更新狀態。 但是在遞歸組件即objectHandler中沒有props.selected。 我在這里想念什么嗎？ 謝謝。

我正在使用react-router 0.7.0

Answer 1

嘗試將“ objectHandler”的DefaultRoute設置為另一個將“ Objects”定義為處理程序的路由的子級。 如：

var routes = (
    <Routes>
        <Route handler={Objects}>
            <DefaultRoute name="objects" handler={objectHandler}/>
        </Route>
    </Routes>
);

jsfiddle： http : //jsfiddle.net/gq1uym5y/1/

Answer 2

我現在正在使用的是這樣的東西。

一條僅路由到App組件的頂級路由：

React.renderComponent(
    <Routes>
        <Route handler={App}>
            <Route path="/todos" handler={TodoList} />
        </Route>
    </Routes>
, mountNode);

App組件如下所示。 我將一個Container傳遞到所有子路由（即TodoList路由）。 此容器包含待辦事項列表（以及應用程序中我需要的其他任何內容，包括添加/保留新待辦事項的方法）。 這有助於將狀態保持在最高級別並解耦子組件 。 由於App組件用於每條路線，因此它永遠不會卸載，因此它不會丟失其狀態。

var Container = function(app) {
    return {
        getTodos: function() {
            return app.state.todos;
        }
    };
};

var App = React.createClass({
    getInitialState: function() {
        return {
            todos: ['Buy milk', 'Call Mike']
        };
    },

    componentWillMount: function() {
        this.container = Container(this);
    },

    render: function() {
        return <this.props.activeRouteHandler container={this.container} />;
    }
});

這是TodoList樣子。 它實際上是兩個組件： TodoList和TodoListInner 。 TodoListInner保持干凈且可測試 。 TodoList本身並不是那么容易測試，但是由於它只是包裹內部組件，因此這不是什么大問題。

var TodoListInner = React.createClass({
    render: function() {
        <ul>
            {this.props.todos.map(function(todo) {
                return <li>{todo}</li>;
            })}
        </ul>
    }
})

var TodoList = React.createClass({
    render: function() {
        <TodoListInner todos={this.props.container.getTodos()} />
    }
});

它比jsmiff的解決方案稍微復雜一些，但是可以帶來一些額外的好處。