Not able to get the react router to work in rescript

1

Based on googling I found this article to use react router in rescript

Based on this, I wrote the following code

type route = 
  | Main
  | GroupedTeamMembers
  | PageNotFound

let fromUrl = (url: RescriptReactRouter.url) => {
  switch url.path {
  | list{} => Main -> Some
  | list{"GroupedTeamMembers"} => GroupedTeamMembers -> Some
  | _ => PageNotFound -> Some
  }
}

@react.component
let make = () => {
  let useRouter = () => RescriptReactRouter.useUrl()->fromUrl
  switch useRouter() {
  | Some(Main) => 
    <div>
      <Header />
      <Employees  />
      <Footer />
    </div>
  | Some(GroupedTeamMembers) => 
    <div>
      <Header  />
      <GroupedTeamMembers />
      <Footer />
    </div>
  | _ => 
    <div>
      <Header />
      <PageNotFound />
      <Footer />
    </div>
  }
}

This code compiles fine but when I do “http://localhost:8000/GroupedTeamMembers” it just says Error Cannot GET /GroupedTeamMembers

Here is my full code just in case if you need to see all my configuration + code GitHub - abhsrivastava/team-member-allocation: React Rescript project for team member allocation

2

Are you able to open http://localhost:8000 directly?

3

Sounds like a dev server setup issue. Make sure you’ve configured historyApiFallback: DevServer | webpack

1 Like