How to load different components on a static URL

Question

I have three pages application where first page have URL with menu name like - http://localhost:3000/careers/ and second page where listing page loaded and it's URL is optional parameters like, If i choose skill then it will append

http://localhost:3000/careers/skills

If i choose designation then it will append

http://localhost:3000/careers/designation

or it can append both the parameters like http://localhost:3000/careers/skills/designation

after this job listing is there, if I click on any particular job on Apply button then URL will be like. URL creation working fine but problem is to load last component. It stays on the same component.

http://localhost:3000/careers/jobID=12345, In this case careers will be static.

app-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>
)

It is my app-router.js file where I define paths, but when I click on apply button it is not loading ApplyJob component. It stays only JobListing component.

All parameters are optional.

Answer 1

Try changing the sequence of the Routes, something like this, move your ApplyJob Route one step up.

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

    </Switch>
)