react-router-native <Redirect> 呈现空白页面

Question

逻辑似乎很简单，尽管我尝试了六种排列以查看是否有任何变化。我不知道为什么 react-router 会这样：

import React from 'react'
import { View, Text } from 'react-native'
import { observer, inject } from 'mobx-react'
import { NativeRouter, Link, Route, Redirect, Switch } from 'react-router-native'

import Welcome from './welcome'
import Tutorial from './tutorial'
import Plants from './plants'

@inject('store')
@observer
class Main extends React.Component {
  render() {
    const newUser = true //this.props.store.plants.length === 0
    const home = newUser ? '/welcome' : '/plants'
    return (
      <Switch>
        <Route path='/plants' component={Plants} />
        <Route path='/tutorial' component={Tutorial} />
        <Route path='/welcome' component={Welcome} />
        <Redirect to={home} />
        <Route path='/' component={Welcome} />
      </Switch>
    )
  }
}

export default Main

最后的“欢迎”应该是不必要的，但我已经把它放在那里进行测试：如果我删除然后欢迎确实出现，所以很明显是导致空白页面呈现。

这是顶级组件的render()方法：

return (
  <Provider store={store}>
    <NativeRouter>
      <Main />
    </NativeRouter>
  </Provider>
)

这是基于https://reacttraining.com/react-router/native/guides/philosophy 的示例，该示例显示了在没有封闭路由器的情况下使用了交换机、路由和重定向：

const App = () => (
  <AppLayout>
    <Route path="/invoices" component={Invoices}/>
  </AppLayout>
)

const Invoices = () => (
  <Layout>

    {/* always show the nav */}
    <InvoicesNav/>

    <Media query={PRETTY_SMALL}>
      {screenIsSmall => screenIsSmall
        // small screen has no redirect
        ? <Switch>
            <Route exact path="/invoices/dashboard" component={Dashboard}/>
            <Route path="/invoices/:id" component={Invoice}/>
          </Switch>
        // large screen does!
        : <Switch>
            <Route exact path="/invoices/dashboard" component={Dashboard}/>
            <Route path="/invoices/:id" component={Invoice}/>
            <Redirect from="/invoices" to="/invoices/dashboard"/>
          </Switch>
      }
    </Media>
  </Layout>
)

Answer 1

将NativeRouter 用作Main 组件中的最顶层组件，它将按预期工作。

@inject('store')
@observer
class Main extends React.Component {
  render() {
    const newUser = true //this.props.store.plants.length === 0
    const home = newUser ? '/welcome' : '/plants'
    return (
      <NativeRouter>
        <Switch>
          <Route path='/plants' component={Plants} />
          <Route path='/tutorial' component={Tutorial} />
          <Route path='/welcome' component={Welcome} />
          <Redirect to={home} />
        </Switch>
      </NativeRouter>
    )
  }
}