无法获得反应组件以使用路由进行渲染

Question

我是新来的反应者，我正在尝试使用路由在容器中渲染名为{Chat}的组件，但它没有任何输出（或错误）。这是我的代码：

import React from "react";
import { Link } from "react-router-dom";
import Axios, { baseURL } from "../../services/config";
import "./Join.css";
import convIcon from "../../assets/selectIcon.png";
import Chat from "../Chat/Chat";

render() {
const { name, room, groups } = this.state;
const { match } = this.props;
const groupsList =
  groups.length > 0 &&
  groups.map(group => {
    return (
      <Link className="chatLink" to={`${match.url}/joinChat/chat`}>
        <div className="chatList">
          <img src={convIcon} title="logo" className="chatIcon" alt="" />
          <h2 className="groupName">
            {group.name}
            <span className="timestamp">2:30 PM</span>
          </h2>
          <span className="lastMsg">Last message text</span>
        </div>
      </Link>
    );
  });
  return (
   <div className="joinOuterContainer">
    <div className="joinInnerContainer">
     <h1 className="heading">Conversations</h1>
     <div className="chatListContainer">{groupsList}</div>
    </div>
    <div>
     <Route path={`${match.url}/joinChat/Chat`} component={Chat}/>
   </div>
   </div>
  );
 }