Framework7反应路由不起作用答案

【问题标题】：Framework7 react routing not workingFramework7反应路由不起作用
【发布时间】：2017-11-26 20:12:19
【问题描述】：

我正在尝试使用 react 和 framework7 构建一个移动网络应用程序，但我似乎无法弄清楚 framework7 的路由是如何工作的。

您可以在下面看到使用 framework7 应用程序初始化页面容器：

export default class AbstractPage extends Component {
constructor(props) {
    super(props);

    this.state = {
        initialized: false
    };

    const logger = createLogger();
    const reducer = combineReducers({ ...props.reducer, routing: routerReducer });
    this.history = createBrowserHistory();
    const historyMiddleware = routerMiddleware(this.history);
    this.store = createStore(reducer, applyMiddleware(promise(), historyMiddleware, logger, thunkMiddleware));

    this.routes: [
        {path: '/', component: WallContainer},
        {path: '/create', component: CreateContainer},
    ];
}

render() {
    return (
        <Provider store={this.store}>
            <Router history={this.history}>
                <Framework7App themeType="material" routes={this.routes}>
                <Statusbar />
                <LeftPanel />
                <Views navbarThrough>
                    <View main url="/" dynamicNavbar>
                        <Pages>
                            <WallContainer />
                        </Pages>
                    </View>
                </Views>
            </Framework7App>
            </Router>
        </Provider>
    );
}
}

通过上面的配置，我总是得到 WallContainer 渲染。当我单击链接进入“创建”页面时，url 更改为 localhost:3000/create，但页面没有更改，并且 wallcontainer 仍然可见。有人知道我在这里做错了什么吗？谢谢！

【问题讨论】：

标签： reactjs react-redux react-router-v4 html-framework-7

【解决方案1】：

原来我忘记将我的 framework7App 上下文添加到我的类中。

WallContainer.contextTypes = {
    framework7AppContext: PropTypes.object
};

当您不添加此上下文时，您不会收到警告或异常，但路由不起作用。

【讨论】：