Question

我尝试使用redux和无状态组件在我的应用中设置路由器。

这里我有 routes.jsx 文件：

const TodoApp = (props) => {
    return (
        <div>
            {props.children}
            <Footer />
        </div>
    )
};

export default (
    <Route  component={TodoApp}>
        <Route path='/' component={TodoList} />
    </Route>
);

首先，props.children无效。我不知道那里有什么不对。

当然，我有 AppRoot.jsx ：

export default (
    <Provider store={store}>
        <Router history={history}>
            {routes}
        </Router>
    </Provider>
)

其中 {routes} 是上面的路线。我实际上在这里尝试做的是有一种模板，其中页脚（和导航栏或其他）总是存在，然后我用路径上的任何内容更改props.children（TodoList在这个例子中。）

Answer 1

尝试在 routes.jsx

中导出组件功能而不是实例

export default () => (
    <Route component={TodoApp}>
        <Route path='/' component={TodoList} />
    </Route>
);

和 AppRoot.jsx ：

export default () => (
    <Provider store={store}>
        <Router history={history}>
            {routes}
        </Router>
    </Provider>
);

有关完整示例，请查看此处：https://github.com/reactjs/react-router-redux

使用redux和react-router将道具传递给路由器

1 个答案: