Requests After Page Change

[bowmanmike]

I feel like I must be missing something simple here, but I'm rather stumped.

I'm working in an inherited project, using React 17, SWR 0.3.0 and React Router DOM 5.2.0. Yes, I know, outdated. But I can't change them at the moment.

We're using SWR throughout the project and it's working really well for the most part. The weirdness I'm seeing is that when I try to create a new page using React Router, and navigate to it from a button in the UI, SWR takes all the API calls from the first page, and calls them on the second page, using the base url of the second page.

My routes are something like this:

<Route path="/parent/create" exact>
  <Create />
</Route>
<Route path="/parent" exact>
  <Parent />
</Route>

I have a link in the Parent component which navigates to /parent/create. On the Parent component, I have a few SWR calls. Things like this.

  const { data: parent } = useSWR('/parent.json');
  const { data: stats } = useSWR('/parent/stats.json');
  const { data: usage } = useSWR('/parent/usage.json');

This all works fine. The problem is that when I navigate to /parent/create, I see the following requests, which get 500s back from the server, and aren't expected.

GET https://localhost:3000/parent/create.json
GET https://localhost:3000/parent/create/stats.json
GET https://localhost:3000/parent/create/usage.json

Can anyone help me figure out why these requests are being made, and what I might be missing to avoid them? I have other pages that link from the same Parent component, and they seem to work fine, but i can't tell any difference between them. Thanks!

[bowmanmike]

Nevermind! Figured it out. Was an issue with the ordering of the routes. Before my /parent/create route, I had defined /parent/:userId, which was catching create as a URL param.