1 year ago

#75464

test-img

cldev

Property 'history' does not exist on type 'IntrinsicAttributes & RouterProps' - react-router / react-router-dom to v6

import { Router } from 'react-router-dom';


type AppShellProps = {
  store: AppStore;
  history: History;
  federation?: FederationProps;
};

type FederatedShellProps = {
  federation?: FederationProps;
  children: React.ReactNode;
  history: History;
};

const FederatedWrapper: FC<FederatedShellProps> = ({ federation, history, children }) => {
  if (federation?.shellEnabled) {
    const { providerPath, applicationName, environment } = federation.federatedProps;
    return (
      <Shell history={history} providerPath={providerPath} applicationName={applicationName} environment={environment}>
        {children}
      </Shell>
    );
  }

  return <Fragment>{children}</Fragment>;
};

const AppShell: FC<AppShellProps> = ({ store, history, children, federation }) => {
  return (
    <ApolloProvider client={getGqlClient()}>
      <FederatedWrapper history={history} federation={federation}>
        <Provider store={store}>
          <Router history={history}>{children}</Router>
        </Provider>
      </FederatedWrapper>
    </ApolloProvider>
  );
};

export default AppShell;

This line errors on history:

<Router history={history}>{children}</Router> 

The error is: Type '{ children: ReactNode; history: History; }' is not assignable to type 'IntrinsicAttributes & RouterProps'. Property 'history' does not exist on type 'IntrinsicAttributes & RouterProps'.

I just bumped up react-router and react-router-dom to v6 from v5.

react-router

react-router-dom

0 Answers

Your Answer

Accepted video resources