The basic React and React Router tutorials were a confusing for me. So, here's mine. It shows only the contents require for each file without all the cruft.
NOTE: This sets up so that URLs are available to be used client-side but doesn't address server-side rendering. That means that if you bookmark a URL other than the site root (e.g. `https://www.example.com/about`) the server will send a its version of a 404 page not found response. See this post for more details.
NOTE: Right now, I'm not going through step by step showing the pieces, this is just my copy showing me what the end states of each file are.
NOTE: I use Prettier for formatting that removes ending semi-colons. If you're code has them, that's likely the difference
This tutorial shows you step by step what to do with full copies of each file that's edited for reference after each step. It makes the page long, but I find it's the easiest way to keep track of what's going on.
I also break things as I go forward. It's a bit like TDD where I intentionally do things like calling files/components before we make them. This helps get used to error messages and makes sure we know the changes we're making line up with what we expect to happen
I call the imports in the order we use them. I'd organize them a little differently in production, but I find this is easier to track for a tutorial
Start by running