问在使用React时组件的消失--React中的路由器

EN

import React from "react";
import "./App.css";
import { Home } from "./components/home";

function App() {
 return <Home />;
}

export default App

export class Home extends Component {
render() {
  return (
    <BrowserRouter>
      <NavigationBar />
      <Switch>
        <Route path="/jobPortal" component={JobPortal} />
      </Switch>
    </BrowserRouter>
  );
}

const NavigationBar = ({ userType }) => {
  return (
    <Navbar style={globalStyles.container} bg="dark" variant="dark">
      <Navbar.Brand style={globalStyles.container} href="/">
        Soffice
      </Navbar.Brand>
      <Nav className="ml-auto">
        <Nav.Link as={NavLink} to="/JobPortal">
          Job Portal
        </Nav.Link>
        {userType && (
          <Nav.Link as={NavLink} to="/logout">
            Log Out
          </Nav.Link>
        )}

        {!userType && (
          <React.Fragment>
            <Nav.Link as={NavLink} to="/SignUp">
              Sign Up
            </Nav.Link>
            <Nav.Link as={NavLink} to="/SignIn">
              Sign In
            </Nav.Link>
          </React.Fragment>
        )}
      </Nav>
    </Navbar>
  );
};

const NavigationBar = ({ url }) => {
  // let {url,url} =useRouteMatch();
  console.log(url);
  return (
    <Navbar style={{ ...globalStyles.container }} bg="info" variant="dark">
      <Nav className="mx-auto">
        <Nav.Link style={styles.navBarColor} as={NavLink} to="/JobPortal">
          Home
        </Nav.Link>
        <Nav.Link style={styles.navBarColor} as={NavLink} to={`${url}/Post`}>
          Post Job
        </Nav.Link>
        <Nav.Link style={styles.navBarColor} as={NavLink} to={`${url}/Want`}>
          Want Job
        </Nav.Link>
        <Nav.Link style={styles.navBarColor} as={NavLink} to={`${url}/Contact`}>
          Contact
        </Nav.Link>
      </Nav>
    </Navbar>
  );
};
const styles = {
  navBarColor: {
    color: "white",
    fontSize: 22
  }
};
export default NavigationBar;

export class JobPortal extends Component {
  componentDidMount() {
    console.log("path", this.props.match.url);
  }
  render() {
    const path = this.props.match.path;

    return (
      <BrowserRouter>
        <NavigationBar url={this.props.match.url} />
        <Switch>
          <Route path={`${path}/Want`} component={Want} />
        </Switch>
      </BrowserRouter>
    );
  }
}

class Want extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "",
      email: "",
      message: "",
      jobs: [
        {
          jobId: 1,
          jobTitle: "software"
        }
      ]
    };
  }

  handleClick() {
    console.log(this.state);
  }
  componentWillMount() {
    this.url = this.props.location.pathname;
    console.log("location", this.props.location.pathname);
  }
  render() {
    const styles = {
      card: {
        width: "14em",
        height: "100%",
        fontSize: 20,
        padding: 10
      }
    };
    return (
      <BrowserRouter>
        <Route path={`${this.url}/:jobId`} component={Job} />
        <Container>
          <Container></Container>
          <Container>
            <Row>
              {this.state.jobs.map((job, index) => (
                <Col style={{ padding: 20 }}>
                  <Card text="white" bg="dark" style={styles.card}>
                    <Card.Body>
                      <Card.Title>
                        <Link to={`${this.url}/${job.jobId}`}>
                          {job.jobTitle}
                        </Link>
                      </Card.Title>
                    </Card.Body>
                  </Card>
                </Col>
              ))}
            </Row>
          </Container>
        </Container>
      </BrowserRouter>
    );
  }
}

export default Want;

export class Job extends Component {
  render() {
    return <p>this will disappear</p>;
  }
}