TypeScript React中Router组件navigateTo属性不存在报错求助

Hey, I’ve run into this exact TypeScript issue before when wrapping class components with withRouter—let’s break down why it’s happening and how to fix it.

The Root Cause #

When you wrap your Router class component with withRouter, the resulting higher-order component (HOC) doesn’t automatically tell TypeScript about your custom navigateTo method. By default, withRouter only types the component with React Router’s built-in props like history, location, and match—it ignores any methods you’ve added to your class.

Step-by-Step Fix #

1. Properly Type Your Component Props

First, make sure your component’s props extend RouteComponentProps from react-router-dom—this gives TypeScript visibility into the history prop you’re using in navigateTo:

import React from 'react';
import { withRouter, RouteComponentProps } from 'react-router-dom';

// Extend RouteComponentProps to include React Router's built-in props
interface IRouterProps extends RouteComponentProps {
  // Add any custom props your component needs here
}

class Router extends React.Component<IRouterProps> {
  constructor(props: IRouterProps) {
    super(props);
  }

  // Type-safe navigateTo method
  public navigateTo(path: string): void {
    this.props.history.push(path);
  }

  render() {
    // Your component's render logic here
    return <div>{this.props.children}</div>;
  }
}

2. Correctly Type the Wrapped Component

Next, we need to explicitly tell TypeScript that the component returned by withRouter still has your navigateTo method. You can do this with a type assertion or by defining a custom type for the wrapped component:

// Define a type that combines the HOC result with your original class's prototype
type ConnectedRouter = React.ComponentType<IRouterProps> & {
  prototype: Router;
};

// Cast the wrapped component to our custom type
const ConnectedRouter = withRouter(Router) as ConnectedRouter;

export default ConnectedRouter;

3. Use the Component Correctly

When you use ConnectedRouter elsewhere (like accessing it via a ref), make sure to type the ref with your original Router class so TypeScript recognizes the navigateTo method:

import React from 'react';
import ConnectedRouter from './Router';

class App extends React.Component {
  // Use the original Router class for the ref type
  private routerRef = React.createRef<Router>();

  handleNavigation = () => {
    // Optional chaining prevents errors if the ref isn't mounted yet
    this.routerRef.current?.navigateTo('/your-target-path');
  };

  render() {
    return (
      <div>
        <ConnectedRouter ref={this.routerRef} />
        <button onClick={this.handleNavigation}>Navigate</button>
      </div>
    );
  }
}

Alternative: Use Function Components with Hooks #

If you’re open to refactoring, function components with useNavigate (from React Router v6+) avoid this type of HOC-related headache entirely:

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

const RouterComponent = () => {
  const navigate = useNavigate();

  const navigateTo = (path: string) => {
    navigate(path);
  };

  // Pass navigateTo down via props if needed
  return <div>{/* Your content */}</div>;
};

export default RouterComponent;

This approach is more idiomatic for modern React and eliminates the need to handle HOC type merging.

内容的提问来源于stack exchange，提问作者user3053247