Reactjs 如何使用引导和react在另一列中显示组件数据

我试图准备仪表盘类的网站使用反应设计我使用的是引导框架。为此，我使用col-2将导航栏垂直对齐到左侧。 在我的垂直对齐导航栏中，我有主页组件、课程应用程序组件、付款批处理组件等

所以我要做的是，当我点击课程应用程序组件时，在URL中，路由工作正常。但我在应用程序组件中放入的数据只显示在col-2中，但我必须在col-10中显示该数据

这是我的密码

这是App.js

import React from 'react';
import { BrowserRouter as Router,Switch,Route } from "react-router-dom";
import Navbar from './Components/Navbar/Navbar';
import Courseapplications from './Pages/Courseapplications/Courseappllications';

function App() {
  return (
    <div className="App">
      <Router>
        <Navbar></Navbar>
        <Switch>
          <Route exact path='/'></Route>
          <Route path='/courseappliations'><Courseapplications></Courseapplications></Route>
        </Switch>
      </Router>
    </div>
  );
}

export default App;

从“React”导入React；
从“react Router dom”导入{BrowserRouter as Router，Switch，Route}；
从“./Components/Navbar/Navbar”导入导航栏；
从“/Pages/Courseapplications/Courseapplications”导入Courseapplications；
函数App（）{
返回(
);
}
导出默认应用程序；

这是Navbar.js

import React, { Component } from 'react';
import './Navbar.css';
import { Link } from 'react-router-dom';

export default class Navbar extends Component {
    render() {
        return (
            <div className='container-fluid p-0'>
                <div className='row no-gutters'>
                    <div className='col-2'>
                        <nav className="navbar navbar-expand-lg navbar-light">
                            <a className="navbar-brand" href="#">
                                React Dashboard
                            </a>
                            <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                                <span className="navbar-toggler-icon"></span>
                            </button>
                        </nav>
                        <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                            <Link className="nav-item color">
                                <i className="fas fa-home"></i>
                                Home
                                    <i className="fas fa-caret-down"></i>
                            </Link>
                            <Link className='nav-item commonstyle' to='/courseappliations'>
                                <i className="fas fa-mobile-alt"></i>
                                Course Applications
                            </Link>

                        </div>
                    </div>
                    <div className='col-10'>
                    </div>
                </div>
            </div>
        )
    }
}

import React，{Component}来自'React'；
导入“/Navbar.css”；
从'react router dom'导入{Link}；
导出默认类导航栏扩展组件{
render（）{
返回(
家
课程申请
)
}
}

这是Courseapplications组件

import React, { Component } from 'react'

export default class Courseappllications extends Component {
    render() {
        return (
            <div>
                <h3>Course Applications</h3>
            </div>
        )
    }
}

import React，{Component}来自“React”
导出默认类CourseApplications扩展组件{
render（）{
返回(
课程申请
)
}
}

---

如果我不清楚我的疑问，请发表评论。

请将问题缩小到实际问题，因为有很多不相关的细节（如“在另一列中…”Hi@I.brod在我的代码中，我将列分为两列，即第2列和第10列。在col-2列中，我将导航栏垂直对齐。第二课的表格示例第一个家庭将在第二个家庭之后出现，课程申请将出现。现在，若我点击HomeComponent，那个么我在HomeComponent中所写的内容必须显示在col-10列中。