我正在编写一个 ReactJS 应用程序，并希望显示一个登录页面，该页面显示登录表单或注册表单，具体取决于遵循的链接。

到目前为止，我的 App 组件如下所示：

const App = () => (
  <Router>
    <div>
      <Route path={ROUTES.LANDING}  render={(props) => <LandingPage {...props} subPage={SignInPage} />}/>
      <Route path={ROUTES.SIGNIN}   render={(props) => <LandingPage {...props} subPage={SignInPage} />}/>
      <Route path={ROUTES.REGISTER} render={(props) => <LandingPage {...props} subPage={RegisterPage} />}/>
      <Route render={(props) => <LandingPage {...props} subPage={SignInPage} />}/>
    </div>
  </Router>
);

现在，我不确定如何让实际的子页面显示在登录页面中。

在我的登陆页面组件中，我有这个：

class LandingPage extends Component {
  constructor(props) {
    super(props);

    this.state = {props}

  }

  render() {

    return (
      <div className="wrapper">
        <div>{this.state.subPage}</div>
      </div>
    );
  }
}

export default LandingPage;

但是当我转到“登录页面/登录”时它没有显示任何内容。我可以在控制台中看到 this.state.subPage 包含正确的组件，当我更改 Route 以直接显示 SignInPage 时，效果很好，因此 SignInPage 本身肯定可以正常工作。

我的 SignInPage 组件包含：

const SignInPage = () => (
  <div>
    <p>Sign In</p>
    <SignInForm />
  </div>
);

class SignInFormBase extends Component {
  constructor(props) {
    super(props);

  }

  onSubmit = event => {
    // This will handle form submission
  };

  render() {
    return (
      <form onSubmit={this.onSubmit}>
        <input name="email" placeholder="Email Address" />
        <input name="password" type="password" placeholder="Password" />
        <button type="submit">Sign In</button>
      </form>
    );
  }
}
const SignInForm = compose(
  withRouter,
  withFirebase,
)(SignInFormBase);

export default SignInPage;

export { SignInForm };

我猜可能问题在于 SignInForm 是一个组件但 SignInPage 不是？但是我是 React 的新手，所以我不知道如何重新配置​​它们！

接下来我可以尝试什么？