使用路由更改交换组件时，ReactJS路由器+组件层次结构

TLDR：我试图找出如何安排嵌套路由和我的组件，以便可以根据路由交换组件

简单地说，我正在尝试构建一个应用程序，让教师可以看到他们在大学里教授的课程

申请途径如下：

/仪表板：呼叫后端以检查教师的帐户上是否设置了默认学院，如果没有，则显示学院选择器对话框，教师可以在其中选择默认学院。一旦有一个默认的学院，比如COLLEGE1，重新路由到下一个路由下一个要点 /dashboard/college/COLLEGE1：获取大学授课的元数据。 /dashboard/college/COLLEGE1/class/CLASS1：显示COLLEGE1中单个类的元数据。通过单击bullet 2中的类可以访问此路由。 下面是当我为每个组件着色时此交互的大致模拟，以便您在响应时更容易参考它们：

然而，我只是不能找出嵌套的routes+组件层次结构，这将使我得到这一点

到目前为止，我的层次结构是：

如何在此处插入路由管理？顺便说一句，我正在使用react路由器库，以便在ReportPage组件中：

从后端加载默认学院或要求用户选择一个学院时，路由为/dashboard 或者是/dashboard/college/COLLEGE1并获取学院报告 或者是/dashboard/college/COLLEGE1/class/CLASS1并获取课堂详细信息？

---

或者这是不可能的，我应该找出另一个流程？

因此，如果我理解正确，您希望使用react路由器根据用户所在的端点加载不同的组件？这是100%可能的。只需将要为特定管线显示的组件作为组件属性传递

您还可以在路径中使用参数，因此在您的示例中，您有/dashboard/COLLEGE1。。。我想你需要有活力来适应任何大学。这是通过在路径中放置参数来完成的，就像这样/dashboard/：somevariablename

如果你还没看过这个，我会的。它提供了很多有用的信息

---

非常感谢您的回复。我对react router进行了很多研究，但我不知道如何创建层次结构，以便头部和导航始终显示在所有组件中，而不必将它们添加到Routes中指定的3个组件的渲染功能中。可能吗？如果是，怎么做？是的，只需将导航和标题放在路由器外部即可。一切都不需要在路线内。也就是说，从理论上讲，你也可以有多个路由器，所以你可以有一个路由器交换机控制你一半的内容，另一个用于下一半，如果这是你将来需要做的事情。我明白了。我能够让它与你的答案一起工作，所以谢谢你的帮助：D

<Route
    // exact

    path={"/dashboard"}
    // path={"/dashboard/:collegeId"}
    // path={"/dashboard/:collegeId/classes/:classId"}

    component={ComponentToPass}
/>

import {HashRouter, Switch, Route} from "react-router-dom"
import DefaultCollegePickerPopup from './wherever'
import CollegeReportPage from './wherever'
import ClassDetailsPage from './wherever'

function RouterComponent(props) {

    return (
        <HashRouter>
            <Switch>

                <Route 
                    exact 
                    path={"/dashboard"}
                    component={DefaultCollegePickerPopup} 
                />
                <Route 
                    exact 
                    path={"/dashboard/:collegeId"} 
                    component={CollegeReportPage}
                />
                <Route 
                    exact 
                    path={"/dashboard/:collegeId/class/:classId"} 
                    component={ClassDetailsPage} 
                />
                
            </Switch>
        </HashRouter>
    )
}

function CollegeReportPage(props) {
    const { collegeId } = useParams();

    return (
    <div>College report for {collegeId}</div>
    )
}

class CollegeReportPage extends React.Component {
    render() {
        const { collegeId } = this.props.match
        return (
            <div>College report for {collegeId}</div>
        )
    }
}