DEV Community

Cover image for Reach Router - An Easy Alternative Way to React Router

Reach Router - An Easy Alternative Way to React Router

Mark Abeto on August 17, 2019

Hi Guys Good Day! I've been using react-router for almost a year now and I have some problems with it mainly because of the reason there...
Read full post
Collapse
 
pretaporter profile image
Maksim •

Just add in your project @types/reach__router as dev dependency and define your page component by the next way:

import * as React from 'react';
export { RouteComponentProps } from '@reach/router';

export const MyPage: React.FC<RouteComponentProps> = () => {
  return <div>Hello World!</div>;
}
Collapse
 
macmacky profile image
Mark Abeto •

Yea, it throws an error in TypeScript. You have to define it that component to get rid of that error. I've read that article a few days before writing this post but they did not yet implement the API.

Collapse
 
chloesun profile image
Chloe Sun •

Hey Mark, thanks for your post! I also use Reach Router for my project. I'm going through a refactor with context API, and I experienced some issues with router url params. Post my issue here github.com/reach/router/issues/328, and hope to get some feedback from you and the community. Thank you very much!

Collapse
 
macmacky profile image
Mark Abeto •

Using the component prop creates a new element for every render if your using an inline function. But thanks for the context tip I forgot about that feature.

Collapse
 
kameshcrayond profile image
kameshcrayond •

How can I achieve this feature(reactrouter.com/web/example/modal-...) of react-router in reach router?