React Application using React-Router and dynamic routes

I am trying to build a dynamic front-end application that communicates with a REST API.

Essentially, its a directory of teachers and their students. In the back-end there is a parent-child relationship between teacher information (name, teaching room, student array) and their students (name, teaching group etc).

I have build various GET/POST methods that follow this route framework:

• /teachers (provides a list of teachers in the database) -/teachers/tID (provides specific info on a teacher using their unique ID) -/teachers/tID/students (provides a list of students assigned to a teacher) -/teachers/tID/students/sID (provides specific info on a student using their unique ID)

I want the react front-end to mimic the progression in the back-end routes. Therefore I want to dynamically load the relevant data when, for example, a user clicks on a teacher <div> and load the relevant list of students.

At the present time I had planned to have three main front-end routes:

• Teacher list route: each div representing a different teacher
• Student list route: each div representing a different student associated with the teacher the user clicked
• Student detail route: page showing specific details for the selected student

I am currently using axios to fetch data. But im struggling to pass the relevant url parameters (:tID and :sID) between the different components in my application so the correct data can be fetched from the server.

I am very much a beginner with React and i've struggled to adapt the lessons learned from the Treehouse React-Router course to my own application.

Any assistance with how I should organise my React front-end and achieve dynamic routing with two url parameters would be much appreciated!

Thanks!