1

我很难弄清楚如何使用我的 RegisterContainer 设置来实现 react-ga withTracker() HOC。我需要一个 RegisterContainer 来防止在注册时触发警报，并且我肯定希望跟踪注册页面以进行分析，但我无法让这两个部分一起工作。这是我关注的关于需要容器的帖子。如何在使用 RegisterContainer 的同时跟踪注册页面？

路线.js：

import React from 'react'
import { Route, Switch, withRouter, Redirect } from "react-router-dom";
import { toast } from "react-toastify"
import withTracker from './components/WithTracker';

// Routes
import Home from "./components/pages/Home";
import SignIn from "./components/pages/SignIn";
import SigningIn from './components/pages/SigningIn';
import RegisterContainer from './components/RegisterContainer'

export class Routes extends React.PureComponent {
    render() {
        return (
            <Switch>
                {/* Visitor */}
                <Route path="/" exact component={withTracker(() => <Home user={this.props.user} />)} />
                <VisitorRoute 
                    path="/sign-in" 
                    loggedIn={this.props.user} 
                    component={withTracker(SignIn)} />
                {/* ** Currently not tracking Register page because of the container */}
                <Route path="/register/:email?" render={() => <RegisterContainer user={this.props.user} />} />
                <Route path="/signing-in" component={withTracker(() => <SigningIn user={this.props.user} loading={this.props.loading} />) } />
            </Switch>
        );
    }
}

  // Must be signed out to view
  const VisitorRoute = ({ component: Comp, loggedIn, path, ...rest }) => {
    return (
      <Route
        path={path}
        {...rest}
        render={props => {
          return loggedIn ? (
            <Route
              render={() => (
                <>
                  {toast.warn("You must be signed out to visit that page.")}
                  <Redirect to="/profile" />
                </>
              )}
            />
          ) : (
            <Comp {...props} />
          );
        }}
      />
    );
  };

export default withRouter(Routes);

注册容器.js：

import React, { Component } from 'react'
import { withRouter } from 'react-router-dom';
import Register from "./pages/Register";
import { toast } from "react-toastify";

class RegisterContainer extends Component {
    constructor(props) {
        super(props)

        if (props.user) {
          toast.warn("You must be signed out to visit that page.")
          props.history.push('/profile')
        }
      }

      render() {
        return <Register />;
      }
}

export default withRouter(RegisterContainer)
4

0 回答 0