Middle URL Parameter in React Router

Question

I'm trying to route a path with parameters in the middle. This is my routes look like.

import Events from "./views/EventsView";
import Event from "./views/EventView";
import NotFound from "./views/NotFoundView";
import RegistrationView from "./views/RegistrationView"

export default [
  {path: "/", component: Events, exact: true},
  {path: "/events", component: Events, exact: true},
  {path: "/events/:projectId", component: Event, exact: true},
  {path: "/events/:projectId/register", component: RegistrationView, exact: true},
  {component: NotFound}
]

Then I map my routes inside a <Switch> which inside a <Router>.

<Switch>
    {
        return routes.map(({path, component, exact}, key) =>
            <Route key={key} path={path} component={component} exact={exact}/>)
}
</Switch>

I use Link to access the Event component.

<Link to="/events/1234">Title Here</Link>

Problem

The problem is my /events/:projectId is getting overridden by path /events/:projectId/register. So every-time I try to access my Event component. I got RegistrationView returned. I try to change exact value or remove the <Switch> but it seems like doesn't work like that. Anyone has a problem with this one? How did you resolve the issue?

Answer 1

{path: "/events/:projectId/register", component: RegistrationView, exact: true},

{path: "/events/:projectId", component: Event, exact: true},

The route with :projectId/register needs to be on top.