ui: fix link to problem ranges

[dhartunian]

Release note (admin ui change): Fixed bug where link to
specific problem ranges had an incorrect path. Problem
ranges are now linked correctly again.

This closes #48559

[cockroach-teamcity]

This change is 

[dhartunian]

@koorosh was there a change in React Router 4 that requires / in front of <Link to=" paths? I saw a few other examples in the code but they weren't broken like this one was.

[koorosh]

@koorosh was there a change in React Router 4 that requires / in front of <Link to=" paths? I saw a few other examples in the code but they weren't broken like this one was.

As far as I know, one of the major changes is that react-router v4 version doesn't support nested routing. Leading / makes this routing path absolute (while missing it - relative to the current path).
I suppose the current issue could be caused by the rearrangement of components hierarchy somehow in the way that relative path didn't match to the expected route.

Before migration to v4

<Route path="reports">
    <Route path="problemranges" component={ ProblemRanges }>...</Route>
     ...
    <Route path={`range/:${rangeIDAttr}`} component={ Range } />
</Route>

now:

<Route path="/">
  <Layout>
      <Switch>
        ...
         <Route exact path="/reports/problemranges" component={ ProblemRanges } />
         <Route exact path={`/reports/range/:${rangeIDAttr}`} component={ Range } />
      </Switch>
  </Layout>
</Route>

Before, problemranges and range routes had a common parent (nested) route reports and now both routes are descendants of root.

[koorosh]

LGTM

[dhartunian]

Thanks for the explanation @koorosh! I checked a few others I was able to find that didn't have / on the front and they worked fine so this explains why.

[dhartunian]

bors r+

[craig]

Build succeeded

• GitHub CI (Cockroach)