1
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.

cldev
  • 671
  • 8
  • 18
  • 1
    Does this answer your question? [react router v6 navigate outside of components](https://stackoverflow.com/questions/69871987/react-router-v6-navigate-outside-of-components) – Drew Reese Jan 20 '22 at 16:53
  • 2
    The gist is that in RRDv6 the `Router` component API changed, and doesn't take a `history` prop. You'll want to create a custom router so you can manage the location state so you can continue using the custom `history` object. – Drew Reese Jan 20 '22 at 16:55

0 Answers0