CODEWITHSUNDEEP
reactjstypescript
jakobdo
jakobdo

Reputation: 1302

Typescript React Lazy load components in route

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 ?

Upvotes: 0

Views: 2265

Answers (1)

Alex
Alex

Reputation: 2485

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

Upvotes: 2

Related Questions