javascript - React Context API和withRouter(React Context API and withRouter)

Question

I am trying to follow this tutorial .

(我正在尝试按照本教程进行操作 。)

I've completed the first step - sign up form - and checked my code against the source code in this repo .

(我已经完成了第一步（注册表单），并对照此仓库中的源代码检查了我的代码。)

My index file (and the one in the tutorial) has:

(我的索引文件（以及本教程中的文件）具有：)

import React from "react";
import ReactDOM from "react-dom";
import  Firebase, {FirebaseContext}  from './components/firebase';
import * as serviceWorker from "./serviceWorker";
import "./index.css";
import App from "./App";

ReactDOM.render(

  <FirebaseContext.Provider value={new Firebase()}>
    <App />
  </FirebaseContext.Provider>,
  document.getElementById('root'),
);
serviceWorker.unregister();

However, an error message appears when I try to test this that says:

(但是，当我尝试对此进行测试时，会显示一条错误消息：)

Error: Invariant failed: You should not use withRouter() outside a Router

(错误：不变式失败：您不应在路由器外部使用withRouter（）)

There is no router in index.js, but the only file in the app is Signup, which uses withRouter as follows:

(index.js中没有路由器，但是应用程序中唯一的文件是Signup，该文件使用withRouter如下：)

import React, { Component } from 'react';
import { Link, withRouter } from 'react-router-dom';
import * as ROUTES from '../../../constants/routes';
import { withFirebase } from '../../../components/firebase';
import { compose } from 'recompose';



const INITIAL_STATE = {
  username: '',
  email: '',
  passwordOne: '',
  passwordTwo: '',
  error: null,
};


const SignUpPage = () => (
  <div>
    <h1>SignUp</h1>
    <SignUpForm />
  </div>
);

class SignUpFormBase extends Component {
  constructor(props) {
    super(props);
    this.state = { ...INITIAL_STATE };


  }
  onSubmit = event => {
    const { username, email, passwordOne } = this.state;
    this.props.firebase
      .doCreateUserWithEmailAndPassword(email, passwordOne)
      .then(authUser => {
        this.setState({ ...INITIAL_STATE });
        this.props.history.push(ROUTES.DASHBOARD);
      })
      .catch(error => {
        this.setState({ error });
      });
      event.preventDefault();
  }
  onChange = event => {
    this.setState({ [event.target.name]: event.target.value });
  };

  render() {
    const {
      username,
      email,
      passwordOne,
      passwordTwo,
      error,
    } = this.state;

    const isInvalid =
      passwordOne !== passwordTwo ||
      passwordOne === '' ||
      email === '' ||
      username === '';

    return (
      <form onSubmit={this.onSubmit}>
        <input
          name="username"
          value={username}
          onChange={this.onChange}
          type="text"
          placeholder="Full Name"
        />
        <input
          name="email"
          value={email}
          onChange={this.onChange}
          type="text"
          placeholder="Email Address"
        />
        <input
          name="passwordOne"
          value={passwordOne}
          onChange={this.onChange}
          type="password"
          placeholder="Password"
        />
        <input
          name="passwordTwo"
          value={passwordTwo}
          onChange={this.onChange}
          type="password"
          placeholder="Confirm Password"
        />
        <button disabled={isInvalid} type="submit">Sign Up</button>
        {error && <p>{error.message}</p>}

      </form>
    );
  }
}
const SignUpLink = () => (
  <p>
    Don't have an account? <Link to={ROUTES.SIGN_UP}>Sign Up</Link>
  </p>
);

const SignUpForm = compose(
  withRouter,
  withFirebase,
)(SignUpFormBase);

export default SignUpPage;
export { SignUpForm, SignUpLink };

If i modify index.js to add Router tags outside the Firebase.Provider then the form renders and it submits to the database, but I don't understand how the tutorial is setup to work if I can't get the steps to run.

(如果我修改index.js以在Firebase.Provider之外添加路由器标签，则该表单将呈现并提交到数据库，但是如果我无法运行这些步骤，我将无法理解本教程的设置工作方式。)

Do you need to use Router if you're already using Firebase.Provider?

(如果您已经在使用Firebase.Provider，是否需要使用路由器？)

  ask by Mel translate from so

Answer 1

等待大神答复