路线不是渲染组件

Question

这是我的代码

  

index.js

import React from "react";
import ReactDOM from "react-dom";
import { Route, BrowserRouter } from "react-router-dom";

import Main from "./Main";
import registerServiceWorker from "./registerServiceWorker";

ReactDOM.render(
  <BrowserRouter>
    <Route exact path="/" component={Main} />
  </BrowserRouter>,
  document.getElementById("root")
);

registerServiceWorker();

  

Main.js

import React from "react";

import SelectList from "./SelectList";

class Main extends React.Component {
  state = {
    currentUser: "hello"
  };

  componentDidMount = () => {
    console.log("Main", this.props);
  };

  render() {
    return (
      <div>
        <h1>Hello world</h1>
        <SelectList
          currentUser={this.state.currentUser}
        />
      </div>
    );
  }
}

export default Main;

  

SelectList.js

import React, { Component } from "react";
import { Route, Switch, withRouter } from "react-router-dom";

import Welcome from "./Welcome";
import LoginForm from "./LoginForm";

class SelectList extends Component {
  componentDidMount = () => {
    console.log("SelectList", this.props);

    if (this.props.currentUser) {
      this.props.history.push({ pathname: "/welcome" });
    } else {
      this.props.history.push({ pathname: "/login" });
    }
  };

  render() {
    return (
      <div>
        <Switch>
          <Route exact path="/welcome" component={Welcome} />
          <Route exact path="/login" component={LoginForm} />
        </Switch>
      </div>
    );
  }
}

export default withRouter(SelectList);

  

Welcome.js

import React, { Component } from "react";

class Welcome extends Component {
  render() {
    return <p>Welcome</p>;
  }
}

export default Welcome;

  

LoginForm.js

import React, { Component } from "react";

class LoginForm extends Component {
  state = {
    emailOrMobile: "",
    password: ""
  };

  submitForm = () => {
    console.log("submit form");
  };

  componentDidMount = () => {
    console.log("hello world");
  };

  render() {
    return (
      <div>
        <form>
          Email or Mobile: <input type="text" /> <br />
          Password: <input type="password" /> <br />
          <input type="button" onClick={this.submitForm} />
        </form>
      </div>
    );
  }
}

export default LoginForm;

此处Welcome.js和LoginForm.js都没有获得渲染。我不知道我的代码有什么问题。根据{{​​1}}的呈现函数，组件selection.js或LoginForm.js中的任何一个 必须渲染。在这里，我还在Welcome.js中定义了currentUser。如果我将Main.js替换为componenetDidMunt中的componentWillMount，那么它也无效。另请参阅我的计算机上的行为屏幕截图。