reactjs - react-router-dom v6 TypeScript withRouter för klasskomponenter

Jag försöker uppdatera react-router-dom till v6 i min TypeScript React-app.

I den officiella react-router-dom-dokumentationen står det helt enkelt:

Tillsammans med uppgraderingen till v5.1 bör du ersätta all användning av withRouter med hooks.

Det ignorerar helt klasskomponenter!

Jag sökte länge på internet, men alla artiklar jag hittade

  • prata om JavaScript snarare än TypeScript, eller
  • prata om funktionskomponenter, eller
  • se v5 (eller lägre) av react-router-dom eftersom de pratar om withRouter.

Finns det ett väl dokumenterat sätt att uppgradera react-router-dom till v6 i en TypeScript React-app som inte kräver att alla klasskomponenter refaktoreras till funktionskomponenter?

Svar #1

Kanske inte väl dokumenterat, men denna tråd på GitHub kan ge dig rätt riktning för att få detta att fungera. Användaren mjackson föreslår att du omsluter dina klasskomponenter i en HOC så att du kan koppla ihop withRouter-hooken och dina klasskomponenter.

// in hocs.js
function withNavigation(Component) {
  return props => <Component {...props} navigate={useNavigate()} />;
}

function withParams(Component) {
  return props => <Component {...props} params={useParams()} />;
}

// in BlogPost.js
class BlogPost extends React.Component {
  render() {
    let { id } = this.props.params;
    // ...
  }
}

export default withParams(BlogPost);

Relaterade artiklar