Typescript React Lazy load components in route

Question

i am trying to lazy load a component like this:

const NewPost = React.lazy(() => import('./NewPost/NewPost'));

And then i want to load it inside a route like this:

<Route 
    path="/new-post" 
    render={() => (
        <Suspense fallback={<div>Loading...</div>}>
            <NewPost />
        </Suspense>
    )} 
/>

And my NewPost is defined like this:

interface INewPostProps extends RouteComponentProps<any> {}

interface INewPostState {
  title: string;
}

class NewPost extends React.Component<INewPostProps, INewPostState> {

But i get this error:

Type '{}' is not assignable to type 'INewPostProps'. Property 'history' is missing in type '{}'.

Which refers to this line: inside Route => Suspense.

What am i missing ?

PS: I stackoverflow the best place to ask/find info regarding typescript / react ?

Alex · Accepted Answer · 2018-11-21 05:21:02Z

2

Your NewPost React Component requires the properties from RouteComponentProps, but you aren't setting them when you render <NewPost />

The route render method receives props that you're ignoring, you can re-write like this:

<Route
  path="/new-post"
  render={(props) => (
    <Suspense fallback={<div>Loading...</div>}>
      <NewPost {...props} />
    </Suspense>
  )}
/>

Recall that the Route render method takes a React.SFC, which is your anonymous arrow function, which receives props injected by react-router

The props variable here will be typed as RouteComponentProps<any, StaticContext, any>, so you can spread them onto your NewPost instance to satisfy it's prop constraints

answered Nov 21, 2018 at 5:21

Alex

2,49318 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Typescript React Lazy load components in route

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related