React Router中Route的component与render属性差异及相关疑问

Hey there! Let's unpack this confusion step by step—this is a super common gotcha with React Router, so you're not alone.

First, Let's Clarify the Core Behavior #

The key difference boils down to component reusability vs. re-creation:

1. The component Prop (When Used Correctly) #

When you pass a direct component reference to component (like <Route path="/" component={Home}>), React Router reuses the same component instance across renders. That means:

• The component only mounts once (so componentWillMount/useEffect(() => {}, []) runs once).
• When the route updates or the parent component re-renders, React just updates the component's props (like match, location, or history) instead of tearing it down and rebuilding it.

2. The Problem with Inline Functions in component #

Now, let's break down the sentence you're confused about: "若为component属性传入内联函数，每次渲染都会创建新组件，导致现有组件卸载、新组件挂载而非仅更新现有组件"

Imagine you write code like this:

// ❌ Bad practice: Inline function in component prop
<Route path="/user" component={() => <UserProfile userId={currentUser.id} />} />

Every time the parent component re-renders (even if currentUser.id doesn't change!), this inline function returns a new instance of the UserProfile component.

React's diffing algorithm sees this as a completely different component type (even though it's the same UserProfile under the hood, the reference is new). So React does what it does with distinct components: it unmounts the old UserProfile and mounts the new one.

This leads to:

• componentWillMount/componentWillUnmount (or their modern useEffect equivalents) firing on every re-render.
• Any local state in UserProfile getting reset every time.
• Unnecessary performance overhead from tearing down and rebuilding the component.

3. The render Prop: The Fix for Custom Props #

The render prop was built specifically for cases where you need to pass custom props to your route component (like the userId in the example above). Instead of creating a new component instance, render calls a function that returns the JSX for your component—but reuses the same component instance.

Example:

// ✅ Good practice: Using render for custom props
<Route path="/user" render={() => <UserProfile userId={currentUser.id} />} />

Here, every time the parent re-renders, the render function runs, but React recognizes that it's still the same UserProfile component. Instead of unmounting/mounting, it just updates the userId prop.

Your observation that componentWillMount gets called with render is normal—it runs once when the component first mounts (when the route matches for the first time). If you navigate away and come back, the component will unmount and remount (so componentWillMount runs again), but that's expected behavior for route navigation. The key difference is that parent re-renders won't trigger this unmount/mount cycle like they do with the inline component prop.

Quick Cheat Sheet #

• Use component={MyComponent} when you don't need to pass custom props directly to the route component.
• Use render={() => <MyComponent customProp={value} />} when you need to pass custom props, or when you want to avoid unnecessary component unmounts/mounts.
• Never pass an inline function to the component prop—it's a recipe for lost state and performance issues.

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