How to make a nested react router component load to a new page and not half-way down the page

Question

I currently have a situation where I have my main parent routes/switch within my App.js file but within a route within the App.js file, I have another component that also has it's own <Router> with routes/switch setup that calls another component called <MyJobComponent />

The hierarchy of files that I have setup are as follows:

App.js - has route/path to the component <AllJobs />
  |
  |---> AllJobs.js - has nested route/path to the component <MyJobComponent />
           |
           |---> MyJobComponent.js - has the <Link to={`/my-job-id/${item.job_id}`}

It's here where this component is being rendered at the AllJobs.js level and not at the App.js level, which is where I would like it to be rendered.

<Switch>
  <Route exact path="/job-path/:jobID" component={MyJobComponent} />
</Switch>

Within the <MyJobComponent /> I have the following Link to code:

<TableCell style={{width: '10%'}}>
  <Link
     to={`/my-job-id/${item.job_id}`}
     style={{ textDecoration: 'underline', color: 'black' }}
  >             
    {item.job_id}
  </Link>
</TableCell> 

Clicking on this Link to renders my page half way down the page within <MyJobComponent />

UPDATED based on react-router nested example

Looking at this example here: React-Router Nested if you click on Topics and then click on the child link Components under Topics, you will see that it displays the heading components below these child links.

It is this section below the child links that I would like to display on it's own page, i.e. components. Is this possible?

Answer 1

Move this to code to App.js:

<Switch>
  <Route exact path="/job-path/:jobID" component={MyJobComponent} />
</Switch>