在react-router-dom中传递额外Props时如何避免TypeScript错误？

Got it, let's fix that TypeScript error when you want your Navbar component to accept both react-router-dom's built-in props and your custom onClick function. Here's a step-by-step solution:

1. Define a Custom Props Interface #

First, create an interface that merges the router's built-in RouteComponentProps with your custom function. You can choose between extending the router props or using a cross type—both work, so pick whichever fits your style.

Option 1: Extend RouteComponentProps #

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

// Define your custom props, inheriting all router props
interface NavbarProps extends RouteComponentProps {
  // Adjust the function signature to match your actual needs (e.g., add event params if required)
  onClick: () => void;
}

Option 2: Cross Type (Alternative) #

If you prefer not to use extends, combine types with the & operator:

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

type NavbarProps = RouteComponentProps & {
  onClick: () => void;
};

2. Update Your Component to Use the Custom Interface #

Replace the generic in React.FC with your new NavbarProps interface. Now TypeScript will recognize both the router props (like history) and your custom onClick function as valid inputs.

const Navbar: React.FC<NavbarProps> = ({ history, onClick }) => {
  return (
    <nav>
      {/* Example using the router's history prop */}
      <button onClick={() => history.push('/dashboard')}>Go to Dashboard</button>
      {/* Example using your custom onClick prop */}
      <button onClick={onClick}>Trigger Custom Action</button>
    </nav>
  );
};

3. Pass the Custom Prop When Rendering the Component #

When you use the Navbar component, make sure to pass your onClick function. If rendering inside a Route, spread the router props to pass them automatically:

// Inside your route setup
<Route 
  path="/navbar" 
  render={(routerProps) => <Navbar {...routerProps} onClick={() => console.log('Custom click fired!')} />} 
/>

If you're rendering Navbar outside a Route but still need router props, wrap it with the withRouter higher-order component:

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

// Wrap the component to inject router props automatically
export default withRouter(Navbar);

// Now you can use it without manually passing router props
<Navbar onClick={() => console.log('Custom click fired!')} />

Bonus: For react-router-dom v6 Users #

If you're on v6, RouteComponentProps is deprecated in favor of hooks like useNavigate, useLocation, etc. Here's how to adjust the solution:

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

// No need to extend RouteComponentProps—just define your custom props
interface NavbarProps {
  onClick: () => void;
}

const Navbar: React.FC<NavbarProps> = ({ onClick }) => {
  // Use the useNavigate hook to get navigation functionality
  const navigate = useNavigate();

  return (
    <nav>
      <button onClick={() => navigate('/dashboard')}>Go to Dashboard</button>
      <button onClick={onClick}>Trigger Custom Action</button>
    </nav>
  );
};

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