Как загрузить разные компоненты на статический URL

Question

У меня есть приложение на три страницы, где на первой странице есть URL с названием меню вроде - http://localhost:3000/careers/ и вторая страница, где страница листинга загружена, и ее URL - необязательные параметры, такие как, если я выберу навык, то он добавит

http://localhost:3000/careers/skills

Если я выберу обозначение, оно будет добавлено

http://localhost:3000/careers/designation

или он может добавить оба параметра, например http://localhost:3000/careers/skills/designation

после появления этого списка вакансий, если я нажму на какую-либо конкретную вакансию на кнопке Применить, то URL будет похож на. Создание URL работает нормально, но проблема в том, чтобы загрузить последний компонент. Он остается на том же компоненте.

http://localhost:3000/careers/jobID=12345, В этом случае карьера будет статичной.

приложение-router.js

const AppRouter = () => (
    <Switch>
      <Route path="/careers" exact component={Careers1} />
      <Route path="/:keyword?/:skills?/:designation?/:location?" component={JobListing} />
      <Route path="/:jobID=?" component={ApplyJob} />
    </Switch>
)

Это мой файл app-router.js, в котором я определяю пути, но когда я нажимаю кнопку «Применить», он не загружает компонент ApplyJob. Остается только компонент JobListing.

Все параметры являются необязательными.

Answer 1

Попробуйте изменить последовательность Маршрутов , как-то так, переместите ApplyJob Маршрут на один шаг вверх.

const AppRouter = () => (
    <Switch>
      <Route path="/careers" exact component={Careers1} />
      <Route path="/:jobID=?" component={ApplyJob} />
      <Route path="/:keyword?/:skills?/:designation?/:location?" component={JobListing} 
     />

    </Switch>
)