Reuse component loaded from a Route

Question

I'm trying to write a React + Redux component (with typescript) that will be loaded from a route:

<Route exact path="/a-path-to-my-page" component={MyComponent} />

However I would like to load the same component inside a Dialog component, my problem is that I need to define a type extending RouteComponentProps to have access to history, location, and other props when loading from the route but I don't need all of these props when loading the component from the Dialog, is there any way to define some kind of conditional type such as:

type MyComponentPropsRouter = RouteComponentProps.RouteComponentProps &
  MyComponentPropsFromStateType &
  MyComponentPropsFromDispatchType;

type MyComponentPropsNoRouter = MyComponentPropsFromStateType & MyComponentPropsFromDispatchType;

type MyComponentAllProps = MyComponentPropsRouter "or" MyComponentPropsNoRouter  //Is this possible?

Thanks in advance!

I've tried with an XOR as suggested here but it is not what I'm looking for ...

score 0 · Answer 1 · answered Jun 15 '19 at 10:09

I solved it by creating my own interface with the desired attributes from RouteComponentProps and leaving the other ones as conditional the following way:

interface MyComponentProps {
   history: History<any>;
   location?: Location<any>
   match?: match<{}> 
}

type MyComponentAllProps = MyComponentProps & MyComponentPropsFromState & MyComponentPropsFromDispatch;

Is that the only way?

Thanks again!

Reuse component loaded from a Route

1 Answers1