React Router有许多位置感知组件，它们使用当前位置对象来确定它们渲染的内容。默认情况下，使用React的上下文模型将当前位置隐式传递给组件。当位置发生更改时，应使用上下文中的新位置对象重新渲染这些组件。
React提供了两种优化应用程序渲染性能的方法：shouldComponentUpdate生命周期方法和PureComponent。除非满足正确的条件，否则两者都会阻止组件的重新渲染。不幸的是，这意味着如果阻止重新渲染，React Router的位置感知组件可能会与当前组件位置不同步。
问题举例
我们从一个阻止更新的组件开始
class UpdateBlocker extends React.PureComponent {
render() {
return (
<div>
<NavLink to="/about">About</NavLink>
<NavLink to="/faq">F.A.Q.</NavLink>
</div>
);
}
}
挂载<UpdateBlocker>时，任何位置感知子组件都将使用当前路径并匹配对象进行渲染。
// location = { pathname: '/about' }
<UpdateBlocker />
// <div>
// <a href='/about' class='active'>About</a>
// <a href='/faq'>F.A.Q.</a>
// </div>
当路径更改时，<UpdateBlocker>不会检测到任何prop或状态更改，因此不会重新渲染其子组件。
// location = { pathname: '/faq' }
<UpdateBlocker />
// the links will not re-render, so they retain their previous attributes
// <div>
// <a href='/about' class='active'>About</a>
// <a href='/faq'>F.A.Q.</a>
// </div>
shouldComponentUpdate
为了使实现shouldComponentUpdate的组件知道它应该在路径更改时更新，其shouldComponentUpdate方法需要能够检测路径更改。
如果您自己实现shouldComponentUpdate，则可以比较当前和下一个context.router对象的路径。但是，作为用户，您不应该直接使用上下文。相反，如果您可以比较当前位置和下一个位置而不触及上下文，那将是理想的选择。
第三方代码
尽管没有自己调用shouldComponentUpdate，但是在路径更改后可能会遇到组件未更新的问题。这很可能是因为第三方代码调用了shouldComponentUpdate，例如react-redux的connect和mobx-react的观察者。
// react-redux
const MyConnectedComponent = connect(mapStateToProps)(MyComponent);
// mobx-react
const MyObservedComponent = observer(MyComponent);
使用第三方代码，您甚至可能无法控制shouldComponentUpdate的实现。相反，您必须构建代码以使路径更改对这些方法显而易见。
connect和observer都创建组件，其shouldComponentUpdate方法对其当前属性及其下一个组件的属性进了浅层比较。
只有当至少一个属性发生变化时，这些组件才会重新渲染。这意味着为了确保在位置发生变化时更新，他们需要获得一个在位置发生变化时更改的属性。
PureComponent
React的PureComponent没有实现shouldComponentUpdate，但它采取了类似的方法来阻止更新。
当“纯”组件更新时，它将对其当前属性和状态进行浅层比较，以显示下一个属性和状态。如果比较未检测到任何差异，则组件将不会更新。与shouldComponentUpdate一样，这意味着为了在路径更改时强制“纯”组件更新，它需要具有已更改的prop或state。
解决办法
快速解决方案
如果在使用高阶组件（如connect（来自react-redux）或者观察者（来自Mobx））时遇到此问题，则可以将该组件包装在withRouter中以删除阻塞的更新。
// redux before
const MyConnectedComponent = connect(mapStateToProps)(MyComponent);
// redux after
const MyConnectedComponent = withRouter(connect(mapStateToProps)(MyComponent));
// mobx before
const MyConnectedComponent = observer(MyComponent);
// mobx after
const MyConnectedComponent = withRouter(observer(MyComponent));
这不是最有效的解决方案，但可以防止阻止更新问题。有关此解决方案的更多信息，请阅读Redux guide。要理解为什么这不是最佳解决方案，请阅读 this thread。
推荐解决方案
在位置更改后，避免阻止重新渲染的关键是：将位置对象作为prop传递给阻塞组件。
每当位置改变时，将比较检测当前和下一个位置，这是不同的。
// location = { pathname: '/about' }
<UpdateBlocker location={location} />
// <div>
// <a href='/about' class='active'>About</a>
// <a href='/faq'>F.A.Q.</a>
// </div>
// location = { pathname: '/faq' }
<UpdateBlocker location={location} />
// <div>
// <a href='/about'>About</a>
// <a href='/faq' class='active'>F.A.Q.</a>
// </div>
获取location
要将当前位置对象作为prop传递给组件，您必须有权访问它。组件可以访问该位置的主要方式是通过<Route>组件。当<Route>匹配时（或者如果您正在使用子prop），它会将当前位置传递给它呈现的子元素。
<Route path='/here' component={Here}/>
const Here = (props) => {
// props.location = { pathname: '/here', ... }
return <div>You are here</div>
}
<Route path='/there' render={(props) => {
// props.location = { pathname: '/there', ... }
return <div>You are there</div>
}}/>
<Route path='/everywhere' children={(props) => {
// props.location = { pathname: '/everywhere', ... }
return <div>You are everywhere</div>
}}/>
这意味着给定一个阻止更新的组件，您可以通过以下方式轻松地将其作为prop传递给它：
// the Blocker is a "pure" component, so it will only
// update when it receives new props
class Blocker extends React.PureComponent {
render() {
return (
<div>
<NavLink to="/oz">Oz</NavLink>
<NavLink to="/kansas">Kansas</NavLink>
</div>
);
}
}
- 1.由<Route>直接呈现的组件不必担心阻塞的更新，因为它具有作为prop引入的location对象。
// The <Blocker>'s location prop will change whenever
// the location changes
<Route path="/:place" component={Blocker} />
- 2.由<Route>直接呈现的组件可以将该location属性传递给它创建的任何子元素。
<Route path="/parent" component={Parent} />;
const Parent = props => {
// <Parent> receives the location as a prop. Any child
// element it creates can be passed the location.
return (
<SomeComponent>
<Blocker location={props.location} />
</SomeComponent>
);
};
如果组件未由<Route>渲染并且渲染它的组件在其变量范围内没有location参数，会发生什么？
您可以采用两种方法自动将location作为组件的属性注入。
- 1.渲染无路径的<Route>。虽然<Route>通常用于匹配特定路径，但无路径<Route>将始终匹配，因此它将始终呈现其组件。
// pathless <Route> = <Blocker> will always be rendered
const MyComponent = () => (
<SomeComponent>
<Route component={Blocker} />
</SomeComponent>
);
您可以使用withRouter高阶组件包装组件，它将会把location作为其中一个属性。
// internally, withRouter just renders a pathless <Route>
const BlockAvoider = withRouter(Blocker);
const MyComponent = () => (
<SomeComponent>
<BlockAvoider />
</SomeComponent>
);
