React Router Parameter Under Subpath - reactjs

Question

I have a React app I'm playing with and using with a star wars API I built locally.
The first two routes work just fine but I don't understand why the third one doesn't work.
My guess is that going to the third route the second component thinks that the work "edit" is the parameter.
Question is, how can I make the third route work as I would like or do I have to take another approach.
I was hoping to have the Edit Episode page be in the same group as the components I use in the "starwars" path.
<Route path="/starwars" exact component={Movies} />
<Route path="/starwars/:id" component={Episode} />
<Route path="/starwars/edit/:id" component={EditEpisode} />

Answer 1

Try adding exact attribute to the second route. It should solve the problem.
<Route path="/starwars" exact component={Movies} />
<Route path="/starwars/:id" exact component={Episode} />
<Route path="/starwars/edit/:id" component={EditEpisode} />
Without exact attribute, all the incoming request to /starwars/{whatever-after-this} matches to the second route and it stops there.

Answer 2

Can you please change the order of the Route and set exact keyword to the /starwars/edit/:id path.
<Route path="/starwars" exact component={Movies} />
<Route exact path="/starwars/edit/:id" component={EditEpisode} />
<Route path="/starwars/:id" component={Episode} />
Hope this will work for you!

Answer 3

Can you check thepublicPath on the output property in your webpack.config file. This should point to the root of your app.
I've been there and this worked for me.
output: {
path: path.resolve('dist'),
publicPath: '/'
}