在子组件中声明React Native路由失效问题求助

嘿，我之前也踩过React Router v4在React Native里嵌套路由的这个坑！你的问题其实是个很常见的小问题，根源和路由上下文的传递有关～

React Router v4的嵌套路由、Redirect这些功能，都依赖**路由上下文（Router Context）**的传递。当你在App.js里写路由时，App组件是被NativeRouter（或者其他Router组件）直接包裹的，天然能获取到完整的路由上下文，所以嵌套路由和重定向都能正常工作。

但如果在其他组件里声明路由/重定向，而这个组件没有通过Route渲染，也没做特殊处理的话，它就拿不到路由上下文——这就导致Redirect完全没反应，嵌套的Route也不生效。

针对你的情况，有两个简单的修复方式，二选一就行：

方式1：用Route包裹嵌套组件 #

把你要写嵌套路由的组件，通过Route来渲染，而不是直接作为子组件。比如：

// ❌ 不要直接这么写
<MyNestedRouteComponent />

// ✅ 改成用Route包裹
<Route component={MyNestedRouteComponent} />

这样MyNestedRouteComponent会自动接收到match、location、history这些路由props，内部的Redirect和嵌套Route就能正常工作了。

方式2：用withRouter高阶组件包装组件 #

如果你的组件没办法用Route包裹（比如是一个全局布局组件），可以用withRouter把它包装一下，手动注入路由上下文：

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

class MyNestedRouteComponent extends Component {
  // ... 你的组件逻辑
}

// 用withRouter包装后导出
export default withRouter(MyNestedRouteComponent);

包装后的组件就能拿到history、location等路由相关的props，重定向功能自然就恢复了。

看你提供的示例仓库，大概率是某个非App.js里的组件没有做上面的处理。你可以：

• 找到你写Redirect的那个组件
• 检查它是不是被Route渲染，或者有没有用withRouter包装
• 按照上面的方式调整后，应该就能解决重定向失效的问题啦！

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