Question

当有人用我的域打开任何网址时，我想跟踪一个查询字符串变量（名为var），所以我的想法是在componentWillMount创建一个父组件，获取查询字符串，并将其保存到redux状态变量，如果该状态变量当前未定义。

例如，如果有人来到这个网址：

mydomain.com/anyurl/?var=abc

现在我将状态变量设置为abc。然后当观众导航到我的域中的另一个页面时，查询字符串中的var可以被解除，但我们仍然会跟踪活动，即使他们转到mydomain.com/anyurl2我们仍然知道这是来自于VAR = ABC

这是我的方法：

import React, { Component } from 'react'
import { recordRefUrl } from '../actions/actions'
import { connect } from 'react-redux'

class BaseContainer extends Component {

    componentWillMount() {
        if (this.props.location.query.var && !this.props.urlRefParam) {
            this.props.dispatch(recordRefUrl(this.props.location.query.var ));
        }
    }
}

function select(state) {
    return {
        urlRefParam: state.urlRefParam,
    }
}

export default connect(select)(BaseContainer)

然后在所有组件中（与BaseContainer在同一个根文件夹中），我将让他们扩展BaseContainer而不是Component：

import React, { Component } from 'react'
import BaseContainer from './BaseContainer'
import { connect } from 'react-redux'

export default class HomePageHandler extends BaseContainer {

    render() {
        return (
            <div>hello</div>
        )
    }
}

我拥有的app.js就像：

import React from 'react'
import { render } from 'react-dom'
import { Route, Router, useRouterHistory, hashHistory } from 'react-router'
import createBrowserHistory from 'history/lib/createBrowserHistory'

//redux stuff
import { Provider } from 'react-redux'
import { applyMiddleware, compose } from 'redux'
import thunk from 'redux-thunk'

import { createStore, renderDevTools } from './utils/devTools'

let appHistory = appHistory = useRouterHistory(createBrowserHistory)({basename: '/'})

let store = createStore(CitySearchApp,
    compose(
        applyMiddleware(thunk),
        window.devToolsExtension ? window.devToolsExtension() : f => f
    )
)

let routes = (
    <MuiThemeProvider>
        <div className="app">
            <Provider store={store}>
                <Router history={appHistory} onUpdate={fireTracking}>
                    <Route name="main" component={AppHandler}>
                        <Route name="home" path="/" component={HomePageHandler}/>
                    </Route>
                </Router>
            </Provider>
            {renderDevTools(store)}
        </div>
    </MuiThemeProvider>
)

render(routes, document.body)

，package.json看起来像：

  "dependencies": {
    "bluebird": "^3.4.0",
    "body-parser": "^1.15.1",
    "chai": "^3.5.0",
    "cors": "^2.7.1",
    "express": "^4.13.4",
    "jquery": "^2.2.4",
    "material-ui": "^0.19.0",
    "mocha": "^2.5.3",
    "morgan": "^1.7.0",
    "react": "^15.6.1",
    "react-addons-css-transition-group": "^15.0.0",
    "react-dnd": "^2.1.4",
    "react-dnd-html5-backend": "^2.1.2",
    "react-dnd-touch-backend": "^0.3.2",
    "react-dom": "^15.0.0",
    "react-flip-move": "^2.4.1",
    "react-ga": "2.1.2",
    "react-input-range": "^1.0.2",
    "react-mount": "^0.1.3",
    "react-redux": "^4.1.2",
    "react-router": "^2.8.1",
    "react-tools": "^0.13.3",
    "redux": "^3.1.4",
    "redux-thunk": "^2.1.0",
    "request": "^2.72.0",
    "react-scroll":"^1.5.4",
    "url-parse": "^1.1.9"
  },

然而这给了我错误：

Error: Could not find "store" in either the context or props of "Connect(BaseContainer)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(BaseContainer)".

如果我更改了我的代码以便HomePageHandler直接扩展Component，那么它将起作用。

我的代码出了什么问题？谢谢！

Answer 1

render(
    <Provider store={STORE}>
        <Router history={history}>
            <Route path="/" component={app}/>
        </Router>
    </Provider>, document.getElementById('app')
);

您可以发布应用入口点的内容吗？它应该类似于上面的代码。

如何实现预处理所有URL并让所有其他组件扩展它的基本组件？

1 个答案: